jquery给轮播图的第一张设置class样式

简介: jquery给轮播图的第一张设置class样式

HTML代码:

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="./images/lunbo1.jpg">
        </div>
        <div class="item">
            <img src="./images/lunbo2.jpg">
        </div>
        <div class="item">
            <img src="./images/lunbo3.jpg">
        </div>
        <div class="item">
            <img src="./images/lunbo4.jpg">
        </div>
    </div>
</div>

jQuery代码:

<!-- 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>
目录
相关文章
|
2月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
22 1
|
21小时前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
2月前
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
9 0
|
4月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
28 0
|
4月前
|
JavaScript 索引
jquery操作select(取值,设置选中)
jquery操作select(取值,设置选中)
|
5月前
|
JavaScript
jQuery中如何来获取和设置属性?
jQuery中如何来获取和设置属性?
30 0
|
前端开发 JavaScript API
jQuery修改class属性和CSS样式
原文:jQuery修改class属性和CSS样式 jQuery修改class属性和CSS样式 class属性修改   类属性即class属性,规定类名.   用类选择器规定样式的时候,需要为元素指定类名,即class属性的值.
1541 0
|
7月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
36 0
|
8月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
29 0
|
4月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload