Bootstrap每天必学之轮播（Carousel）插件(3)

//基本实例。 <div> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div> <div> <img src="https://www.jb51.net/img/slide1.png" alt="第一张"> </div> <div> <img src="https://www.jb51.net/img/slide2.png" alt="第二张"> </div> <div> <img src="https://www.jb51.net/img/slide3.png" alt="第三张"> </div> </div> <a href="#myCarousel" data-slide="prev">&lsaquo;</a> <a href="#myCarousel" data-slide="next">&rsaquo;</a> </div>

data 属性解释：

1.data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；
2.data-slide-to 来向轮播底部创建一个原始滑动索引， data-slide-to="2"将把滑动块移动到一个特定的索引，索引从 0 开始计数。
3.data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放。

如果在 JavaScript 调用就直接使用键值对方法，并去掉 data-；
//设置自定义属性

$('#myCarousel').carousel({ //设置自动播放/2 秒 interval : 2000, //设置暂停按钮的事件 pause : 'hover', //只播一次 wrap : false, });

轮播插件还提供了一些方法，如下：

//点击按钮执行 $('button').on('click', function() { //点击后，自动播放 $('#myCarousel').carousel('cycle'); //其他雷同 });

事件

$('#myCarousel').on('slide.bs.carousel', function() { alert('当调用 slide 实例方式时立即触发'); }); $('#myCarousel').on('slid.bs.carousel', function() { alert('当轮播完成一个幻灯片触发'); });