轮播插件

一．轮播

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

//基本实例

<div id="myCarousel" class="carousel slide" style="width:900px">

   <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/slide1.png" alt="第一张">

         <div class="carousel-caption">

         <h3>Bootstrap</h3>

         <p>Bootstrap是一款html5响应式框架</p>

         </div>

      </div>

      <div class="item">

         <img src="img/slide2.png" alt="第二张">

         <div class="carousel-caption">

            <h3>JQuery</h3>

            <p>JQuery是一款javascript的开发库</p>

         </div>

      </div>

      <div class="item">

         <img src="img/slide3.png" alt="第三张">

         <div class="carousel-caption">

            <h3>Extjs</h3>

            <p>Extjs是一款富客户端的js框架</p>

         </div>

      </div>

   </div>

<a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>

<a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>

</div>

 

data属性解释：

1.data-slide接受关键字prev或next，用来改变幻灯片相对于当前位置的位置；2.data-slide-to来向轮播底部创建一个原始滑动索引，data-slide-to="2"将把滑动块移动到一个特定的索引，索引从0开始计数。

3.data-ride="carousel"

属性用户标记轮播在页面加载时开始动画播放。

轮播插件有三个自定义属性：

data-interval默认值5000，幻灯片的等待时间(毫秒)。如果为false，轮播将不会自动开始循环。

data-pause默认鼠标停留在幻灯片区域(hover)即暂停轮播，鼠标离开即启动轮播。data-wrap默认值true，轮播是否持续循环。

如果在JavaScript调用就直接使用键值对方法，并去掉data-；

//设置自定义属性

$('#myCarousel').carousel({

//设置自动播放2秒

interval:2000,

//设置暂停按钮的事件

pause:'hover',

//只播一次

wrap:false,

});

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

cycle循环各帧(默认从左到右)

pause停止轮播

number轮播到指定的图片上(小标从0开始，类似数组)

prev循环轮播到上一个项目

next循环轮播到下一个项目

//点击按钮执行

$('button').on('click',function(){

//点击后，自动播放

$('#myCarousel').carousel('cycle');

//其他雷同

}

slide.bs.carousel当调用slide实例方式时立即触发该事件。slid.bs.carousel当轮播完成一个幻灯片触发该事件。

//事件

$('#myCarousel').on('slide.bs.carousel',function(){

alert('当调用slide实例方式时立即触发');

});

$('#myCarousel').on('slid.bs.carousel',function(){

alert('当轮播完成一个幻灯片触发');

});