图片滚动代码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行，避免左面出现空白和卡顿。