用jQuery实现优酷首页轮播图

▓▓▓▓▓▓ 大致介绍

　　看到了一个轮播图的思路，就想的自己动手实践一下，总体来说用jQuery实现起来简单多了

　　如果对代码中使用的方法有疑问，可以参考我的jQuery学习之路(持续更新)，里面有讲解；或者你和我一样学习jQuery不久，那你可以看看我的jQuery小案例(持续更新)，互相学习！

　　预览：优酷首页轮播图

▓▓▓▓▓▓ 思路

　　思路其实非常简单，就是当点击图片下面的圆点或者图片两边的箭头时，让想要看到的图片走到它的位置，然后当前的图片和想要看到的图片按照一个方向运动就可以了

　　例如：我们点击第五个小圆点，让第五个图片跑到当前图片的后面，然后一起向左运动

　　用jQuery实现优酷首页轮播图

　　当然了，如果你想要看前面的图片，让图片先跑到当前图片的左边，然后和当前图片一起向右运动

▓▓▓▓▓▓ 基本结构与样式

 1     <div class="lunbo">
 2         <div class="picture">
 3             <ul>
 4                 <li><img src="img/1.jpg"></li>
 5                 <li><img src="img/2.jpg"></li>
 6                 <li><img src="img/3.jpg"></li>
 7                 <li><img src="img/4.jpg"></li>
 8                 <li><img src="img/5.jpg"></li>
 9             </ul>
10         </div>
11         <ul class="btn">
12             <li id="active"><div></div></li>
13             <li><div></div></li>
14             <li><div></div></li>
15             <li><div></div></li>
16             <li><div></div></li>
17         </ul>
18         <div id="left"><img src="img/left.png"></div>
19         <div id="right"><img src="img/right.png"></div>
20     </div>

View Code