|
如果使用一些开源程序循环调用carousel轮播插件来进行图片展示，它的第一个item元素是没有active这个样式选择器的，那么该如何做才能给第一个元素添加class呢，这次就以织梦程序为例来实现。
首先我们看看织梦的轮播调用代码
<div class="swiper-container index-focus">
<div id="index-focus" class="carousel slide carousel-focus" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#index-focus" data-slide-to="0"></li>
<li data-target="#index-focus" data-slide-to="1"></li>
<li data-target="#index-focus" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
{dede:arclist titlelen='100' row='3' orderby='id'}
<div class="item">
<a href="[field:arcurl/]" title="[field:fulltitle/]">
<div class="carousel-img" style="background-image:url('[field:litpic function=firstimg('@me')/]');"></div>
<div class="carousel-caption hidden-xs">
<h3>[field:title/]</h3>
</div>
</a>
</div>
{/dede:arclist}
</div>
<a class="left carousel-control" href="#index-focus" role="button" data-slide="prev">
<span class="icon-prev coolc icon-jiantouleft" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#index-focus" role="button" data-slide="next">
<span class="icon-next coolc icon-jiantouright" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
从上面可以看出我们循环轮播图的时候，第一个元素是没有active这个样式选择器的，那么现在我们就需要给它的第一个元素添加class
<!-- js引入 -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
$('#myCarousel').carousel({interval: 4000});
//获取轮播的第一个，然后添加class样式
$(".carousel-inner").find("div").first().attr("class","item active");
$(".carousel-indicators").find("li").first().attr("class","active");
});
</script>
这个时候我们就给li标签和div标签的第一个元素都添加上了class为active的选择器，这个时候我们的carousel轮播插件就能使用了！ | 
转播
