大致介绍
看到了一个轮播图的思路，就想的自己动手实践一下，总体来说用jQuery实现起来简单多了
思路
思路其实非常简单，就是当点击图片下面的圆点或者图片两边的箭头时，让想要看到的图片走到它的位置，然后当前的图片和想要看到的图片按照一个方向运动就可以了
例如：我们点击第五个小圆点，让第五个图片跑到当前图片的后面，然后一起向左运动
当然了，如果你想要看前面的图片，让图片先跑到当前图片的左边，然后和当前图片一起向右运动
基本结构与样式
<div class="lunbo">
<div class="picture">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
</div>
<ul class="btn">
<li id="active"><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
<div id="left"><img src="img/left.png"></div>
<div id="right"><img src="img/right.png"></div>
</div>
*{
margin: 0;
padding: 0;
}
.lunbo{
width: 100%;
height: 410px;
position: relative;
text-align: center;}
.picture{
width: 1190px;
height: 480px;
position: absolute;
top: 0;
left: 88px;
overflow: hidden;
}
.picture li{
width: 1190px;
height: 410px;
margin: 0 auto;
list-style-type: none;
margin-top: 70px;
position: absolute;
overflow: hidden;
top: ;
left: ;
}
.picture img{
cursor: pointer;
}
.btn{
display: block;
width: 150px;
height: 30px;
position: absolute;
top: 460px;
left: 130px;
}
.btn li{
display: block;
width: 10px;
height: 10px;
background-color:white;
list-style-type: none;
position: absolute;
top: 0px;
left: 0px;
border-radius: 10px;
cursor: pointer;
}
#active{
background-color: #03A9F4;
}
.btn li:hover{
background-color:#9e9e9e;
}
#left{
position: absolute;
top: 240px;
left: 90px;
cursor: pointer;
}
#right{
position: absolute;
top: 240px;
