一个轮播图片主要包括三个部分:
轮播的图片
轮播图片的计数器
轮播图片的控制器
复杂一点的轮播图片, 每个轮播区会带有对应的标题和描述内容.
第一步: 设计轮播图片的容器. 在 Bootstrap 框架中采用 carousel 样式, 并且给这个容器定义一个 ID 值, 方便后面采用 data 属性来声明触发.
<div id="slidershow" class="carousel"></div>
第二步: 设计轮播图片计数器. 在容器 div.carousel 的内部添加轮播图片计算器, 采用 carousel-indicators 样式, 其主要功能是显示当前图片的播放顺序 (有几张图片就放置几个 li), 一般采用 ol 来制作:
- <div id="slidershow" class="carousel">
- <!-- 设置图片轮播的顺序 -->
- <ol class="carousel-indicators">
- <li class="active">1</li>
- <li>2</li>
- <li>3</li>
- ...
- </ol>
- </div>
第三步: 设计轮播图片播放区, 这个区域主要用来放置需要轮播的图片. 这个区域使用 carousel-inner 样式来控制, 而且其同样放置在 carousel 容器内, 并且通过 item 容器来放置每张轮播的图片
- <!-- 设置轮播图片 -->
- <div class="carousel-inner">
- <div class="item active">
- <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" http://images3.c-ctrip.com/rk/201407/ll580x145.jpg%22 ; alt=""></a>
- </div>
- ...
- <div class="item">
- <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg%22 ; alt=""></a>
- </div>
- </div>
第四步: 设计轮播图片控制器. 很多时候轮播图片还具有一个向前播放和向后播放的控制器. 在 Carousel 中通过 carousel-control 样式配合 left 和 right 来实现
- <a class="left carousel-control" href="">
- <span class="glyphicon glyphicon-chevron-left"></span>
- </a>
- <a class="right carousel-control" href="">
- <span class="glyphicon glyphicon-chevron-right"></span>
- </a>
第五步: 各个部分的属性设置]
data-ride 属性: 取值 carousel, 并且将其定义在 carousel 上. 用于标记轮播在页面加载时就开始动画播放, 无需使用初始化的 js 函数.
data-target 属性: 取值 carousel 定义的 ID 名或者其他样式识别符, 如前面示例所示, 取值为 "#slidershow", 并且将其定义在轮播图计数器的每个 li 上.
data-slide 属性: 取值包括 prev,next,prev 表示向后滚动, next 表示向前滚动. 该属性值同样定义在轮播图控制器的 a 链接上, 同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符.
data-slide-to 属性: 用来传递某个帧的下标, 比如 data-slide-to="2", 可以直接跳转到这个指定的帧 (下标从 0 开始计), 同样定义在轮播图计数器的每个 li 上.
data-interval 属性: 幻灯片轮换的等待时间 (毫秒 number). 如果为 false, 轮播将不会自动开始循环
data-wrap 属性: 轮播是否持续循环 boolean.
data-pause 属性: hover. 默认鼠标悬停留在幻灯片区域即停止播放, 离开即开始播放
来源: http://www.qdfuns.com/article/31205/7f23cd05689b20dcc95cdf757a3ffaa4.html