无缝滚动改进版支持上下左右滚动（封装成函数）

复制代码代码如下:<!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 结构必须要像上面的结构一样。

　　推荐阅读

　　Javascript在IE和FireFox中的不同表现简析

1.document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];Firefox下,只能使用document.formName.elements["elementName"].>>>详细阅读

本文标题：无缝滚动改进版支持上下左右滚动（封装成函数）

地址：http://www.17bianji.com/kaifa2/JS/22872.html

1/2 1