1、新建html文档。
3、书写hmtl代码。<div id=focus> <ul id=beni> <li class=first><a href="#">我一个人住</a></li> <li><a href="#">进来喝一杯？</a></li> <li><a href="#">我家正好有这张DVD，想去看么？</a></li> <li><a href="#">你长得很像我的一个朋友</a></li> <li><a href="#">我昨天好像看见你了？</a></li> <li><a href="#">我不想出去，想进来……</a></li> </ul> <div id=description> <img src="images/s1.jpg" /> </div> </div>
5、书写并添加js代码。<script>window.onload=function(){ var ele=document.getElementById("description"); var w=ele.clientWidth; var n=20,t=20; var timers=new Array(n); var c=document.getElementById("beni").getElementsByTagName("li"); for(var i=0;i<c.length;i++){ c[i].index=i; c[i].onmouseover=doSlide; } c=null; function doSlide(){ var x=ele.scrollLeft; var d=this.index*w-x; if(!d) return; for(var i=0;i<n;i++)(function(){ if(timers[i]) clearTimeout(timers[i]); var j=i; timers[i]=setTimeout(function(){ ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n))); },(i+1)*t); })(); }}</script>
7、查看效果。
