前述
利用 Bootstrap 实现图片轮播, 包括 基本轮播, 带标题的轮播, 设置轮播速度的轮播, 控制前后的轮播
实例
基本轮播
代码
1. 引入 Bootstrap 和 jQuery 文件
- <!-- jQuery 文件. 务必在 bootstrap.min.js 之前引入 -->
- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">
- </script>
- <!-- 新 Bootstrap 核心 CSS 文件 -->
- <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
- rel="stylesheet">
- <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
- <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
- </script>
2. 首先要有一个整体的轮播容器
<div id="carousel-example-generic" class="carousel slide" 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 id="carousel-example-generic" class="carousel slide" data-ride="carousel">
- <!-- 轮播指标 -->
- <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>
- <li data-target="#carousel-example-generic" data-slide-to="3"></li>
- </ol>
4. 设置轮播的幻灯片项目
Carousel-inner: 旋转图片列表区域, 其中每项有 item 来修饰
其中的 active,next,prev 都认为是可见的
class="item active": 利用 active 来设置对应显示的
- <!-- 轮播的幻灯片项目 -->
- <div class="carousel-inner" role="listbox">
- <div class="item active">
- <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg">
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg">
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg">
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg">
- </div>
- </div>
完整代码
- <!DOCTYPE html>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
- <script src="https://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 id="carousel-example-generic" class="carousel slide" data-ride="carousel">
- <!-- 轮播指标 -->
- <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>
- <li data-target="#carousel-example-generic" data-slide-to="3"></li>
- </ol>
- <!-- 轮播的幻灯片项目 -->
- <div class="carousel-inner" role="listbox">
- <div class="item active">
- <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg">
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg">
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg">
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg">
- </div>
- </div>
- </div>
效果展示
可以看到我是通过鼠标点击来实现图片的切换
带标题的轮播
代码
和基本轮播的整体结构相同, 不同点是要在轮播的幻灯片项目中添加 Carousel-caption 样式对应的代码块
Carousel-caption: 表示每个 item 项应该有标题信息, 默认显示下, 中位置
- <!-- 轮播的幻灯片项目 -->
- <div class="carousel-inner" role="listbox">
- <div class="item active">
- <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg">
- <div class="carousel-caption">
- <h4 > 标题一 </h4>
- <p > 图片一内容简介 </p>
- </div>
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg">
- <div class="carousel-caption">
- <h4 > 标题二 </h4>
- <p > 图片二内容简介 </p>
- </div>
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg">
- <div class="carousel-caption">
- <h4 > 标题三 </h4>
- <p > 图片三内容简介 </p>
- </div>
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg">
- <div class="carousel-caption">
- <h4 > 标题四 </h4>
- <p > 图片四内容简介 </p>
- </div>
- </div>
- </div>
效果展示
设置轮播速度的轮播
代码
1. 添加轮播时间的属性
设置轮播速度也非常简单, 不需要进行大改动, 只需要在整体的轮播容器上设置 data-interval="1000" 属性
表示每一秒轮播一张图片
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
2. 完整代码
- <!DOCTYPE HTML>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
- <script src="https://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 id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
- <!-- 轮播指标 -->
- <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>
- <li data-target="#carousel-example-generic" data-slide-to="3"></li>
- </ol>
- <!-- 轮播的幻灯片项目 -->
- <div class="carousel-inner" role="listbox">
- <div class="item active">
- <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg">
- <div class="carousel-caption">
- <h4 > 标题一 </h4>
- <p > 图片一内容简介 </p>
- </div>
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg">
- <div class="carousel-caption">
- <h4 > 标题二 </h4>
- <p > 图片二内容简介 </p>
- </div>
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg">
- <div class="carousel-caption">
- <h4 > 标题三 </h4>
- <p > 图片三内容简介 </p>
- </div>
- </div>
- <div class="item">
- <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg">
- <div class="carousel-caption">
- <h4 > 标题四 </h4>
- <p > 图片四内容简介 </p>
- </div>
- </div>
- </div>
- </div>
效果展示
控制前后的轮播
代码
1. 我们要在基本轮播的基础上添加控制前后切换的代码来实现功能
最核心的代码是: data-slide="prev" 属性 data-slide 接受关键字 prev 或 next, 用来改变幻灯片相对于当前位置的位置.
<!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
2. 完整代码
<!DOCTYPE HTML> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://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 id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 轮播指标 --> <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> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- 轮播的幻灯片项目 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg"> <div class="carousel-caption"> <h4 > 标题一 </h4> <p > 图片一内容简介 </p> </div> </div> <div class="item"> <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg"> <div class="carousel-caption"> <h4 > 标题二 </h4> <p > 图片二内容简介 </p> </div> </div> <div class="item"> <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg"> <div class="carousel-caption"> <h4 > 标题三 </h4> <p > 图片三内容简介 </p> </div> </div> <div class="item"> <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg"> <div class="carousel-caption"> <h4 > 标题四 </h4> <p > 图片四内容简介 </p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
效果展示
https://im4.ezgif.com/tmp/ezgif-4-cbde53b25cab.gif
总结
结合上面的实例, 可以总结出:
HTML 结构: 主要分为以四个部分
容器: 最外层 div, 需要一个 data-ride="carousel" 来指定为轮播放插件, 并且提供一个 Id, 方便圆圈指示符的关联
图片列表部分, 用一个外层 div 包裹所有, 然后每个 img 会被一个 div, 则 class 为 item 的包裹住
圆圈指示符: 用一个 ol 列表来显示其各图形列表项, 每个列表项需要指定 data-slide-to="index" 属性, 用于标记当前圆圈的索引号, ol li 来和最外层的容器进行关联
左右控制按钮: 实现向左, 向右移动的功能
CSS 样式
Carousel: 只有一个相对定位标记
Carousel-inner: 旋转图片列表区域, 其中每项有 item 来修饰, 其中的 active,next,prev 都认为是可见的, Carousel-caption: 表示每个 item 项应该有标题信息, 默认显示下, 中位置
Carousel-control: 设置向左, 向右按钮的样式, 其中会设置渐变, 透明度等信息, 提供了 icon-prev,icon-next 两种额外样式
Carousel-indicators: 圆圈部分样式, 都是绝对定位, 每个 li 设置为行内块元素, 用 text-indent:-999 来隐藏字体
来源: https://www.cnblogs.com/jyroy/p/10416468.html