轮播插件就是将几张同等大小的大图,按照顺序依次播放
<!--
分析一下轮播插件的组成:
1.最外层容器div:加类class="carousel slide" 为了不显示白色多余部分,设置宽度=图片宽度
2.轮播圆点:放在容器有序列表中,ol加类class="carousel-indicators",li加data-target="最外层容器" data-slide-to="0"(图片索引,从0开始,点击第一个圆点显示第一张,点击第三个圆点显示第三张),默认显示第一张,则加类class="active"
3.轮播内容的容器:加类class="carousel-inner",每张图片放在一个容器div中,加类item,默认显示第一张,再加class="active",还可以加文字,放在容器div class="carousel-caption"中
4.左右切换的箭头,a标签,href="最外层容器",加data-slide="prev/next" class="carousel-control left/right"
5.最外层容器加 data-ride="carousel" 实现自动轮播,间隔时间是5s
-->
<div id="myCarousel" class="carousel slide" style="width:690px;">
<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>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="../img/11.jpg" alt="第一张">
<div class="carousel-caption">
<h3>Free</h3>
<p>I want to flee with the balloon</p>
</div>
</div>
<div class="item">
<img src="../img/22.jpg" alt="第二张">
<div class="carousel-caption">
<h3>Alone</h3>
<p>I'm not alone only when I miss you</p>
</div>
</div>
<div class="item">
<img src="../img/33.jpg" alt="第三张">
<div class="carousel-caption">
<h3>Yes,I do</h3>
<p>Marry me,please</p>
</div>
</div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>
data属性解释:
1.data-slide接受关键字prev和next,用来改变幻灯片相对于当前位置的位置
2.data-slide-to来向轮播底部创建一个原始滑动索引,data-slide-to=”2”将把滑动块移动到一个特定的索引,索引从0开始计数
3.data-ride=”carousel”属性用户标记轮播在页面加载时开始动画播放
效果图如下:
轮播插件自定义属性:
<!-- JS代码 -->
$('#myCarousel').carousel({
// 设置自动播放--2s
interval:2000,
// 设置暂停轮播事件
pause:'hover',
// 只播一次
wrap:false
});
轮播插件提供的方法:
<button class="btn btn-default" id="cycle">开始</button>
<button class="btn btn-default" id="pause">停止</button>
<button class="btn btn-default" id="number">第二张</button>
<button class="btn btn-default" id="prev">上一张</button>
<button class="btn btn-default" id="next">下一张</button>
<!--JS代码-->
$('#cycle').on('click',function(){
$('#myCarousel').carousel('cycle');
});
$('#pause').on('click',function(){
$('#myCarousel').carousel('pause');
});
$('#number').on('click',function(){
$('#myCarousel').carousel(1);
});
$('#prev').on('click',function(){
$('#myCarousel').carousel('prev');
});
$('#next').on('click',function(){
$('#myCarousel').carousel('next');
});
轮播插件事件:
$('#myCarousel').on('slide.bs.carousel',function(){
alert('当调用slide实例方式时立即触发!');
});
$('#myCarousel').on('slid.bs.carousel',function(){
alert('当轮播完成一个幻灯片触发');
});