| 作用：向左滚动的轮播图 参数：主容器的id 调用方式：直接拷贝调用方法 function autoPlay(id){ var scroll=document.getElementById(id); var ul=scroll.children[0] var num=0 var timer=null; timer=setInterval(autoGoing,20); //滚动轴方法 function autoGoing(){ num--; num<=-1200 ? num=0:num; ul.style.left=num+"px"; } scroll.οnmοuseοver=function(){ //鼠标悬停停止滚动 clearInterval(timer) } scroll.οnmοuseοut=function(){ //鼠标移开 继续滚动 timer=setInterval(autoGoing,20); } } 参考标签： <body> <div class="box" id="scroll"> <ul> <li><img src="img/01.jpg"/></li> <li><img src="img/02.jpg"/></li> <li><img src="img/03.jpg"/></li> <li><img src="img/04.jpg"/></li> <li><img src="img/01.jpg"/></li> <li><img src="img/02.jpg"/></li> </ul> </div> 参考样式： *{margin: 0;padding: 0;} ul{list-style: none;} img{ vertical-align: top; /*取消三个图片底部像素距离*/ } .box{ width: 600px; height: 200px; margin: 100px auto; position: relative; overflow: hidden; } .box ul li { float: left; } .box ul{ width: 400%; position: absolute; left: 0; top: 0; } ------------------------------------------------------------------------------------------------------------------------
|