轮播图collapse一共由三个主要部分组成,而这三部分需放置在一个父级div里面。
父级代码结构:
父容器属性说明:
id:可以随意取一个,主要用于一下控制内容的变换
data-ride="carousel":用于页面一开始加载的时候就加载轮播
其他部分属性:
data-interval="10000":轮播时间
data-warp:轮播是否循环,默认为true
data-pause:鼠标覆盖,暂停循环,默认为true
第一部分:轮播中的小圆点:
如图:
第一部分代码结构(小点点):
- 1
- 2
- 3
- 4
属性说明:
class="carousel-indicators":指定本内容为小圆点
data-target="#carouselContainer":指向父容器的id
data-slide-to="0":指向内容的索引(点击li的时候,跳转的地址)
第二部分代码结构(轮播内容):
属性说明:
class="carousel-inner":指定本div内容为轮播内容
class=“item”:轮播子项,要轮播多少写多少
class="carousel-caption":轮播内容中的提示信息
第三部分代码结构(左右控制):
属性说明:
class="left carousel-control":左边控制按钮
href="#carouselContainer":指向父容器(定位)
data-slide="prev":上一个索引
data-slide="next":下一个索引
class="glyphicon glyphicon-chevron-left":左边图标
重写属性:
$(document).off(".data-api"):禁用左右控制、小圆点的索引
$("#carouselContainer").carousel():开启轮播
开放左右控制:$("#carouselContainer a.left").click(function (){
$("#carouselContainer").carousel("prev");
});
$("#carouselContainer a.right").click(function (){
$("#carouselContainer").carousel("next");
});
监听事件:$("#carouselContainer").on("slide.bs.carousel",function(){
alert("****");
}).on("slide.bs.carousel",function(){
alert("****");
});
概览: