标签：
好想哭，不容易啊，终于磕磕绊绊写了一个稍微难一点的东西了，还是要多写几遍啊
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function() { var odiv=document.getElementById(‘div1‘); var oul=document.getElementById(‘ul1‘); var oli=oul.getElementsByTagName(‘li‘); var speed=2; var oa=document.getElementsByTagName(‘a‘); oul.innerHTML=oul.innerHTML+oul.innerHTML; oul.style.width=oli[0].offsetWidth*oli.length+‘px‘ function move() { if(oul.offsetLeft<-oul.offsetWidth/2){ oul.style.left=‘0‘; } if(oul.offsetLeft>0){ oul.style.left=-oul.offsetWidth/2+‘px‘; } oul.style.left=oul.offsetLeft+speed+‘px‘; }; var timr=setInterval(move,30); odiv.onmouseover=function(){ clearInterval(timr); } odiv.onmouseout=function(){ timr=setInterval(move,30); } oa[0].onclick=function(){ speed=-2; } oa[1].onclick=function(){ speed=2; } }; </script> <style> *{padding: 0;margin: 0;} #div1{position: relative; background: blueviolet;width: 1128px;height: 250px; margin: 0 auto;overflow: hidden;} ul{position: absolute; left:0;top:0;width: 1128px;height: 250px; } li{float: left;list-style: none;} </style> </head> <body> <a href="#">zuo</a> <a href="#">you</a> <div id="div1"> <ul id="ul1"> <li><img src="img/1.jpg"></li> <li><img src="img/2.jpg"></li> <li><img src="img/3.jpg"></li> </ul> </div> </body> </html>
定时器，每30毫秒执行一次，变动left的值
鼠标移入的时候关闭定时器
鼠标离开的时候开打定时器
定义变量speed 点you的时候speed成为-2 图片向友滚动
点zuo的时候，speed成为2，图片向左滚动
还是要多写几遍的。。。。
标签：
原文地址：http://www.cnblogs.com/sishiuliunian/p/4896028.html
