html图片无缝滚动代码怎样写（js图片无缝滚动的原理）

html图片无缝滚动代码怎样写，原文标题：JS代码写图片无缝滚动。

一、HTML

二、CSS

三、javascript

window.onload=function(){

var oDiv=document.getElementById(“box”);

var oLeft=oDiv.getElementsByTagName(“div”)[0];

var oInner=oDiv.getElementsByTagName(“div”)[1];

var oRight=oDiv.getElementsByTagName(“div”)[2];

var oUl=oInner.getElementsByTagName(“ul”)[0];

var aLi=oUl.getElementsByTagName(“li”);

oUl.innerHTML =oUl.innerHTML;

oUl.style.width=aLi[0].offsetWidth*aLi.length “px”;

var speed=-5;

var timer=null;

timer=setInterval(function(){

oUl.style.left=oUl.offsetLeft speed “px”;

if (oUl.offsetLeft<-oUl.offsetWidth/2) {

oUl.style.left= 0 “px”;

}

else if (oUl.offsetLeft>0) {

oUl.style.left=-oUl.offsetWidth/2 “px”;

};

},30)

oLeft.onmousedown=function(){

speed=-5;

}

oRight.onmousedown=function(){

speed=5;

}

oUl.onmouseover=function(){

clearInterval(timer);

}

oUl.onmouseout=function(){

timer=setInterval(function(){

oUl.style.left=oUl.offsetLeft speed “px”;

if (oUl.offsetLeft<-oUl.offsetWidth/2) {

oUl.style.left= 0 “px”;

}

else if (oUl.offsetLeft>0) {

oUl.style.left=-oUl.offsetWidth/2 “px”;

};

},30)

}

}

四、最终效果

tip：

1. 第34行oUl.innerHTML =oUl.innerHTML;将oUl内容复制，防止出现空白。

2. 第35行oUl.style.width=aLi[0].offsetWidth*aLi.length “px”;设置oUl的宽，与aLi相匹配的。

3. 第38-46行，设置oUl的运动，改变的是oUl的left值，第40-41行，避免右面出现空白和卡顿；第43-44行，避免左面出现空白和卡顿。

本文《html图片无缝滚动代码怎样写（js图片无缝滚动的原理）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

站长导航
友情链接交换
关键词排名优化
网站内容优化
GEO培训
SEO教程
站长导航
友情链接交换