利用JavaScript做無縫滾動
阿新 • • 發佈：2017-11-30
tps hid blank nts ner pos 下載 http osi
<html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style type="text/css"> *{margin: 0;padding: 0;} #div1 {width:400px;height:100px;margin:50px 0 0 350px;overflow: hidden;position: absolute;background: red;} #div1 ul{position: absolute;left: 0;top: 0;} #div1 ul li{float: left;width:100px;height: 100px; list-style:none;} </style> </head> <body> <a href="javascript:;">向左走</a> <a href="javascript:;">向右走</a> <a href="javascript:;">中速</a> <a href="javascript:;">高速</a> <div id="div1"> <ul> <li><img src="01.jpg" /></li> <li><img src="02.jpg" /></li> <li><img src="03.jpg" /></li> <li><img src="04.jpg" /></li> </ul> </div> <script type="text/javascript"> var odiv=document.getElementById(‘div1‘); varoul=odiv.getElementsByTagName(‘ul‘)[0]; var oli=oul.getElementsByTagName(‘li‘); var speed=-2; 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 timer=setInterval(move,30); odiv.onmouseover=function() { clearInterval(timer); } odiv.onmouseout=function() { timer=setInterval(move,30); } document.getElementsByTagName(‘a‘)[0].onclick=function() { speed=-2; } document.getElementsByTagName(‘a‘)[1].onclick=function() { speed=+2; } document.getElementsByTagName(‘a‘)[2].onclick=function() { speed=-1; } document.getElementsByTagName(‘a‘)[3].onclick=function() { speed=-4; } </script> </body> </html>
附件下載
查看原文
利用JavaScript做無縫滾動