无缝滚动
闲着无聊等动漫更新写了个无缝滚动,代码很烂,只是做个简单的记录吧,js还是在学习基础中。
思路:
1.设置div外边框,超出部分隐藏,
2.js中设置双倍的图片宽度即双倍的ul宽度(两个相同的ul相连更改ul宽度为图片占位宽度和)
3.判断当滚完一半回到初始位置(滚动过界后,重设位置)
主要点是:offsetLeft offsetWidth的应用
总结似乎有点乱
代码如下:
<!-- date:2013-09-15 定时器的使用,无缝轮播 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> --> <script> window.onload=function(){ var oWrap = document.getElementById("wrap"); var oUl = document.getElementsByTagName("ul")[0]; var aLi = oUl.getElementsByTagName("li"); var str = oUl.innerHTML+oUl.innerHTML; oUl.innerHTML = str; oUl.style.width = aLi[0].offsetWidth*aLi.length+"px"; function move(){ alert(oUl.offsetLeft); oUl.style.left = oUl.offsetLeft-20+"px";//如果走到一半时left值为-1/2oul.style.width if(oUl.offsetLeft<-oUl.offsetWidth/2) { oUl.style.left = 0; } } var timer=setInterval(move,30); for(var i=0;i<aLi.length;i++) { aLi[i].onmouseover=function(){ clearInterval(timer); } aLi[i].onmouseout=function(){ timer=setInterval(move,30); } } } </script> <style type="text/css"> ul ,li, a{margin:0px;padding:0px;} #wrap{ margin:50px auto; width:712px; height: 108px; border: 1px #000 solid; position: relative; overflow: hidden; } ul{ list-style: none; position: absolute; } li{ float: left; } </style> <body> <div id="wrap"> <ul > <li><a href="#"><img src="images/1.jpg" /></a></li> <li><a href="#"><img src="images/2.jpg" /></a></li> <li><a href="#"><img src="images/3.jpg" /></a></li> <li><a href="#"><img src="images/4.jpg" /></a></li> </ul> </div> </body> </html>