利用 BootStrap 实现图片轮播，包括 基本轮播、带标题的轮播、设置轮播速度的轮播、控制前后的轮播
实例 基本轮播 代码1.引入bootstrap和jQuery文件
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>2.首先要有一个整体的轮播容器
<div data-ride="carousel">3.设置轮播指标
data-ride 属性：取值 carousel，并且将其定义在 carousel 上。
data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如下面的实例，取值为“#carousel-example-generic”，并且将其定义在轮播图计数器的每个 li 上。
data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。
Carousel-indicators：圆圈部分样式，都是绝对定位，每个li设置为行内块元素，用text-indent：-999来隐藏字体
<!-- 轮播指标 --> <div data-ride="carousel"> <!-- 轮播指标 --> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol>4.设置轮播的幻灯片项目
Carousel-inner：旋转图片列表区域，其中每项有item来修饰
其中的active、next、prev都认为是可见的
class="item active"：利用active来设置对应显示的
<!-- 轮播的幻灯片项目 --> <div role="listbox"> <div> <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" > </div> <div> <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" > </div> <div> <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" > </div> <div> <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" > </div> </div>完整代码
<!DOCTYPE html> <script src="http://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> div.item img{ width:100%; } div#carousel-example-generic{ width:80%; margin:0 auto; } </style> <div data-ride="carousel"> <!-- 轮播指标 --> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- 轮播的幻灯片项目 --> <div role="listbox"> <div> <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" > </div> <div> <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" > </div> <div> <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" > </div> <div> <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" > </div> </div> </div> 效果展示可以看到我是通过鼠标点击来实现图片的切换
和基本轮播的整体结构相同， 不同点是要在轮播的幻灯片项目中添加 Carousel-caption 样式对应的代码块
Carousel-caption：表示每个item项应该有标题信息，默认显示下、中位置
<!-- 轮播的幻灯片项目 --> <div role="listbox"> <div> <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" > <div> <h4>标题一</h4> <p>图片一内容简介</p> </div> </div> <div> <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" > <div> <h4>标题二</h4> <p>图片二内容简介</p> </div> </div> <div> <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" > <div> <h4>标题三</h4> <p>图片三内容简介</p> </div> </div> <div> <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" > <div> <h4>标题四</h4> <p>图片四内容简介</p> </div> </div> </div> 效果展示