1.添加轮播时间的属性
设置轮播速度也非常简单，不需要进行大改动，只需要在整体的轮播容器上设置 data-interval="1000" 属性
表示每一秒轮播一张图片
2.完整代码
<!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" data-interval="1000"> <!-- 轮播指标 --> <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> <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> </div> 效果展示1.我们要在基本轮播的基础上添加控制前后切换的代码来实现功能
最核心的代码是：data-slide="prev" 属性 data-slide接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
2.完整代码
<!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> <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> <!-- Controls --> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span></span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span></span> </a> </div> 效果展示https://im4.ezgif.com/tmp/ezgif-4-cbde53b25cab.gif
总结结合上面的实例，可以总结出：
Html结构：主要分为以四个部分
容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆圈指示符的关联
图片列表部分，用一个外层div包裹所有，然后每个img会被一个div，则class为item的包裹住