javascript实现图片无缝滚动

效果:鼠标移动到图片停止滚动,鼠标自动移出。

可以向左或向右调整。

复制代码代码如下所示:



{ *

保证金:0;

填充:0;

}

{ # DIV1

溢出:隐藏;

宽度:712px;

身高:108px;

保证金:100px汽车;

职位:相对;

背景:红色;

}

# DIV1 UL {

位置:绝对;

左:0;

顶部:0;

}

# DIV1 UL Li {

浮点数:左;

宽度:178px;

身高:108px;

列表样式:无;

}





复制代码代码如下所示:



转左

转右





































以上是一个简单的布局,下面是主要的Javascript代码

复制代码代码如下所示:



在window.onload =函数(){

无功odiv = document.getelementbyid(联赛);

VaR,= odiv.getelementsbytagname('ul){ 0 };

VaR阿里= oul.getelementsbytagname(李的);

var速度= 2;

oul.innerhtml = oul.innerhtml;

oul.style.width =阿里{ 0 }。offsetwidth * ali.length + 'px;

函数移动(){

如果(oul.offsetleft < -oul.offsetwidth / 2){

oul.style.left = '0';

}

如果(oul.offsetleft > 0){

oul.style.left = -oul.offsetwidth / 2 + 'px;

}

oul.style.left = oul.offsetleft +速度+ 'px;

}

VaR定时器= setInterval(移动,30);

odiv.onmouseover =函数(){

ClearInterval(定时器);

};

odiv.onmouseout =函数(){

定时器= setInterval(移动,30);

};

document.getelementsbytagname('a'){ 0 }。onclick =函数(){

速度= 2;

};

document.getelementsbytagname('a'){ 1 }。onclick =函数(){

速度= 2;

};

}





简单地说这个想法:

UL的第一集里面的图片有8 oul.innerhtml = oul.innerhtml;

在计算李的UL宽度时,实际宽度* 8

然后隐藏多余的内容

注:oul.offsetleft必须负

所以不要判断何时签字。

复制代码代码如下所示:

如果(oul.offsetleft < -oul.offsetwidth / 2){

oul.style.left = '0';

}



这一部分显示图片滚动到一半,很快地将图片向后拉,因为程序执行得如此之快以至于几乎看不到无缝卷。

最后,采用变速控制左右方向的滚动。

上面的代码只实现了最基本的功能,合作伙伴可以在此基础上继续改进它。