利用JavaScript做无缝滚动
发布时间:2017-11-30 02:00:03
<html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css"> *{marg ...
<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='/images/loading.gif' data-original="01.jpg" /></li> <li><img src='/images/loading.gif' data-original="02.jpg" /></li> <li><img src='/images/loading.gif' data-original="03.jpg" /></li> <li><img src='/images/loading.gif' data-original="04.jpg" /></li></ul></div><script type="text/javascript"> var odiv=document.getElementById('div1'); var oul=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做无缝滚动
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。