我也学会图片轮换了！

<style type="text/css"> #div{width:500px;height:100px;overflow:hidden;} #photo li{height:100px;} #photo2 li{height:100px;} .aa{border:1px solid #CCC; width:50px; height:50px; display:inline-block; margin-left:10px;} </style> <div id="div"> <ul id="photo" style="margin-top:0px;"> <li style="background:#CCC;">1</li> <li style="background:#666;">2</li> <li style="background:#999;">3</li> <li style="background:#033;">4</li> </ul> </div> <a href="#" onmouseover="aa.go(0)" onmouseout="aa.auto()" class="aa">1</a> <a href="#" onmouseover="aa.go(1)" onmouseout="aa.auto()" class="aa">2</a> <a href="#" onmouseover="aa.go(2)" onmouseout="aa.auto()" class="aa">3</a> <a href="#" onmouseover="aa.go(3)" onmouseout="aa.auto()" class="aa">4</a> <br/> //-----------上下动画互不影响--------------- <div id="div"> <ul id="photo2" style="margin-top:0px;"> <li style="background:#CCC;">1</li> <li style="background:#666;">2</li> <li style="background:#999;">3</li> <li style="background:#033;">4</li> </ul> </div> <a href="#" onmouseover="bb.go(0)" onmouseout="bb.auto()" class="aa">1</a> <a href="#" onmouseover="bb.go(1)" onmouseout="bb.auto()" class="aa">2</a> <a href="#" onmouseover="bb.go(2)" onmouseout="bb.auto()" class="aa">3</a> <a href="#" onmouseover="bb.go(3)" onmouseout="bb.auto()" class="aa">4</a> <script type="text/javascript"> var photo=function(id){ var $=document.getElementById(id),x=null,v=null,index=0,_this,change=-100,d=50,num=3, tween=function(t,b,c,d){ return -c*(t/=d)*(t-2)+b; }, autoo=function(){ _this.show(++index>num?0:index); }; return { show:function(n){ if(typeof x == "number"){ clearInterval(x); x=null; } var t=0,n=n,b=parseInt($.style.marginTop),c=n*change-b, o=function(){ t++; if(t==d+1){ clearInterval(x);x=null;index=n; }else{ $.style.marginTop=tween(t,b,c,d)+"px"; } } x=setInterval(o,10); }, auto:function(){ _this=this; v=setInterval(autoo,3000); }, go:function(n){ clearInterval(v); this.show(n); } } } var aa=photo("photo"); aa.auto(); var bb=photo("photo2"); bb.auto(); </script>
 提示：您可以先修改部分代码再运行