织梦使用carousel轮播插件如何给第一个元素添加class样式

如果使用一些开源程序循环调用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轮播插件就能使用了！