Javascript 实现图片无缝滚动
效果:鼠标移入图片停止滚动,鼠标移出自动滚动
可以调整向左或右方向滚动
<styletype="text/css"> *{ margin:0; padding:0; } #div1{ overflow:hidden; width:712px; height:108px; margin:100pxauto; position:relative; background:red; } #div1ul{ position:absolute; left:0; top:0; } #div1ulli{ float:left; width:178px; height:108px; list-style:none; } </style>
<body> <ahref="javascript:;">向左走</a> <ahref="javascript:;">向右走</a> <divid="div1"> <ul> <li> <imgsrc="img/无缝滚动/1.jpg"/> </li> <li> <imgsrc="img/无缝滚动/2.jpg"/> </li> <li> <imgsrc="img/无缝滚动/3.jpg"/> </li> <li> <imgsrc="img/无缝滚动/4.jpg"/> </li> </ul> </div> </body>
以上是一个简单的布局,下面是主要的Javascript代码
<scripttype="text/javascript"> window.onload=function(){ varoDiv=document.getElementById("div1"); varoUl=oDiv.getElementsByTagName('ul')[0]; varaLi=oUl.getElementsByTagName('li'); varspeed=2; oUl.innerHTML+=oUl.innerHTML; oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; functionmove(){ 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'; } vartimer=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; }; } </script>
简单讲下思路:
首先设置ul里面的图片一共有8张oUl.innerHTML+=oUl.innerHTML;
在计算ul的宽度为li的实际宽度*8
之后将多余的内容隐藏
注意:oUl.offsetLeft肯定是负值
所以判断的时候不要把负号漏掉
if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left='0';
}