肉渣教程

循环轮播

上一节 结束

carousel循环轮播会自动循环轮播,也可以通过按钮前进或后退,一般用于网页显著的位置,比如视频网站的首页可用此组件展示最新电影海报。


carousel 循环轮播

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

运行一下

添加标题和描述性内容

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

运行一下

carousel循环轮播 - 参数设置

有两种方式来进行参数设置:

  • 利用data-加参数名的形式构建该元素的自定义属性,比如data-interval="1000"
  • 在JavaScript中使用$('#example').carousel(options)方式


常用的Options有:

参数名 数据类型 默认值 说明
interval 数字型 5000 自动轮播的间隔时间,单位为毫秒
pause 字符串或null "hover" 自动轮播间隔时间计时暂停的触发事件,比如默认为hover即鼠标悬停时,自动轮播计时暂停,鼠标若在这悬停一辈子,就会一直显示当前页一辈子
wrap 布尔型 true 轮播结束是否继续从第一页开始而循环
keyboard 布尔型 true 选中组件状态下,是否可以通过键盘的前进后退键来控制轮播

carousel循环轮播 - JavaScript中常用方法

$("#example").carousel(option)

option命令 说明
"cycle" 开启轮播计时
"pause" 暂停轮播计时
number 直接跳到指定页(从0开始计数,0代表第一页)
"prev" carousel循环轮播后退一页
"next" carousel循环轮播前进一页


示例:文档加载完毕后,暂停轮播

$(document).ready(function(){
    $('#carousel-example-captions').carousel("pause");
});

运行一下

carousel循环轮播 - 事件

事件 说明
slide.bs.carousel 当一次slide滑动轮播动作开始,则触发预设事件
slid.bs.carousel 当一次slide滑动轮播动作完毕,则触发预设事件


示例:当一次slide滑动轮播动作完毕,则触发预设事件(弹出“反清复明”)

$('#carousel-example-captions').on('slid.bs.carousel', function (){
    alert( "反清复明" );
});

运行一下


循环轮播

上一节 结束