简单轮播图实现原理详解 - 好文

轮播图实现思路：

第一步：设计轮播图片的容器；

<div id="myCarousel" class="carousel" data-ride="carousel">

注意：data-ride="carousel"属性表示在页面加载时就开始动画播放。

第二步：设计轮播图片计数器；

<ol class="carousel-indicators">
<ol class="carousel-indicators"> <li data-target="#myCarousel"
data-slide-to="0" class="active"></li> <li data-target="#myCarousel"
data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li> </ol>
第三步：设计轮播图片播放区即图片容器（放入需要播放的图片）；

<div class="carousel-inner" role="listbox">
<div class="carousel-inner" role="listbox"> <div class="item active"> <img
src="img/zz1.jpg"> <div class="carousel-caption"> <h4>Number1</h4>
<p>我的意中人是一个盖世英雄，有一天，他会驾着七彩祥云来娶我.....</p> </div> </div> <div class="item"> <img
src="img/z1.jpg" > <div class="carousel-caption"> <h4>Number2</h4> <p>紫霞</p>
</div> </div> </div>
第四步：设计轮播图片的左右控制区（left carousel-control控制向前）；

<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>

完整代码过程如下：

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/> </head> <script
src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link
href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
rel="stylesheet"> <script
src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style> div.item img{ width:100%; } div#myCarousel{ top: 50px; width:40%;
margin:0 auto; } </style> <div id="myCarousel" class="carousel"
data-ride="carousel"> <ol
class="carousel-indicators"> <li
data-target="#myCarousel" data-slide-to="0" class="active"></li> <li
data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel"
data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>  <div
class="carousel-inner" role="listbox"> <div class="item active"> <img
src="img/zz1.jpg"> <div class="carousel-caption"> <h4>Number1</h4>
<p>我的意中人是一个盖世英雄，有一天，他会驾着七彩祥云来娶我.....</p> </div> </div> <div class="item"> <img
src="img/z1.jpg" > <div class="carousel-caption"> <h4>Number2</h4> <p>紫霞</p>
</div> </div> <div class="item"> <img src="img/b1.jpg" > <div
class="carousel-caption"> <h4>Number3</h4> <p>至尊宝</p> </div> </div> <div
class="item"> <img src="img/hh1.jpg" > <div class="carousel-caption">
<h4>Number4</h4> <p>哈哈哈哈哈</p> </div> </div> </div>  <a class="left
carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon
glyphicon-chevron-left"></span></a> <a class="right carousel-control"
href="#myCarousel" data-slide="next"><span class="glyphicon
glyphicon-chevron-right"></span></a> </div>
轮播效果截图如下：

热门工具换一换