昨天写了两篇关于无缝滚动的文章，无缝滚动——左右和无缝滚动——上下，今天抽空整理了下，封装成函数，同时支持上下左右无缝滚动。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚动——上下</title> <style type="text/css"> *{margin:0;padding:0;} li{list-style:none;} img{border:0;} #scroll{width:178px;margin:50px auto;position:relative;} .btn{display:block;width:27px;height:27px;position:absolute;left:75px;} .up{background:url(images/up.gif);top:0;} .down{background:url(images/down.gif);top:490px;} .content{height:440px;overflow:hidden;position:relative;top:40px;} .content ul{position:absolute;top:0;left:0;} .content li{height:110px;} </style> </head> <body> <div id="scroll"> <a href="javascript:;" class="btn up"></a> <a href="javascript:;" class="btn down"></a> <div class="content"> <ul> <li><a href="#" title="111"><img src="images/1.jpg" alt="111" width="178" height="108"/></a></li> <li><a href="#" title="222"><img src="images/2.jpg" alt="222" width="178" height="108"/></a></li> <li><a href="#" title="333"><img src="images/3.jpg" alt="333" width="178" height="108"/></a></li> <li><a href="#" title="444"><img src="images/4.jpg" alt="444" width="178" height="108"/></a></li> </ul> </div> </div> </body> </html> <script type="text/javascript" src="scroll.js"></script> <script type="text/javascript"> window.onload = function(){ scroll('top',1,1000); }; </script>
scroll.js：
/********** 功能：实现水平或垂直无缝滚动 参数：direction方向，总共4个值：left,right,top,bottom speed移动距离 iTime多少时间后开始移动，若不写则页面加载完开始移动 **********/ function scroll(direction,speed,iTime){ var oDiv = document.getElementById('scroll'); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oDiv.getElementsByTagName('li'); var aBtn = oDiv.getElementsByTagName('a'); var timer = null; var iSpeed = 0; var flag = true; //判断水平移动还是垂直移动 oUl.innerHTML += oUl.innerHTML; switch(direction){ case 'left': iSpeed = -speed; oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; flag = true; break; case 'right': iSpeed = speed; oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; flag = true; break; case 'top': iSpeed = -speed; flag = false; break; case 'bottom': iSpeed = speed; flag = false; break; }; setTimeout(move,iTime); //左按钮和上按钮 aBtn[0].onclick = function(){ clearInterval(timer); iSpeed = -speed; move(); }; //右按钮和下按钮 aBtn[1].onclick = function(){ clearInterval(timer); iSpeed = speed; move(); }; oUl.onmouseover = function(){ clearInterval(timer); }; oUl.onmouseout = function(){ move(); }; function move(){ timer = setInterval(function(){ if(flag){ oUl.style.left = oUl.offsetLeft + iSpeed + 'px'; if(oUl.offsetLeft < -oUl.offsetWidth / 2){ oUl.style.left = '0'; }else if(oUl.offsetLeft > 0){ oUl.style.left = - oUl.offsetWidth / 2 + 'px'; } }else{ oUl.style.top = oUl.offsetTop + iSpeed + 'px'; if(oUl.offsetTop <= - oUl.offsetHeight / 2){ oUl.style.top = '0'; }else if(oUl.offsetTop >= 0){ oUl.style.top = - oUl.offsetHeight / 2 + 'px'; }; }; },30); }; };
需要注意的是：html 结构必须要像上面的结构一样。