BootStrap[第十八章:轮播插件]

一．轮播

轮播插件就是将几张同等大小的大图，按照顺序依次播放。

    //基本实例。
    

        

            

            

            

        
        

            

                
            
            

                
            
            

                
            
        
        ‹
        ›
    

轮播图

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('当轮播完成一个幻灯片触发');
});