其实这样的效果 目前很多网站上都有 其实以前也写过一个 只是当时代码只是为了实现而已，代码很乱，所以现在有业余时间研究了下，其实也并没有什么特殊地方 很类似于左右控制按钮切换图片的思路。效果如下：
可能录制的时候 有点卡 。
具体思路： 1. 首先和左右箭头切换图片思路是一模一样的 点击下一页按钮时候 外层容器left = 一张图片的宽度×当前的索引index 同理 点击上一页按钮也一样 然后加点动画效果改变相对应的宽度和高度 就可以实现。思路其实很简单的。所以就半斤八两就写了一个，希望各位高手包涵啊！所以也没有什么好解释的地方。直接上代码，下面有源码附件 具体的可以看看源码。
HTML代码如下：
1 <div class="slider"> 2 <a href="javascript:void(0);" class="prev btn"></a> 3 <div class="scroll"> 4 <ul class="scrollContainer"> 5 <li class="panel"> 6 <a href="" class="inside" target="_blank"> 7 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/1.jpg" /> 8 <span>Alexander McQueen秋季1</span> 9 </a> 10 </li> 11 <li class="panel"> 12 <a href="" class="inside" target="_blank"> 13 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/2.jpg" /> 14 <span>Gustavsson演绎朋克的性感</span> 15 </a> 16 </li> 17 <li class="panel"> 18 <a href="" class="inside" target="_blank"> 19 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/3.jpg" /> 20 <span>Alexander McQueen秋季3</span> 21 </a> 22 </li> 23 <li class="panel"> 24 <a href="" class="inside" target="_blank"> 25 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/4.jpg" /> 26 <span>Alexander McQueen秋季4</span> 27 </a> 28 </li> 29 <li class="panel"> 30 <a href="" class="inside" target="_blank"> 31 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/5.jpg" /> 32 <span>Alexander McQueen秋季5</span> 33 </a> 34 </li> 35 <li class="panel"> 36 <a href="" class="inside" target="_blank"> 37 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/6.jpg" /> 38 <span>Alexander McQueen秋季6</span> 39 </a> 40 </li> 41 <li class="panel"> 42 <a href="" class="inside" target="_blank"> 43 <img width="230" height="288" alt="Alexander McQueen秋季" src="images/7.jpg" /> 44 <span>Alexander McQueen秋季7</span> 45 </a> 46 </li> 47 </ul> 48 </div> 49 <a href="javascript:void(0);" class="next btn"></a> 50 </div>