javaｓｃｒｉｐｔ实现图片无缝滚动

效果：鼠标移动到图片停止滚动，鼠标自动移出。

可以向左或向右调整。

复制代码代码如下所示：



{ *

保证金：0；

填充：0；

}

{ # DIV1

溢出：隐藏；

宽度：712px；

身高：108px；

保证金：100px汽车；

职位：相对；

背景：红色；

}

# DIV1 UL {

位置：绝对；

左：0；

顶部：0；

}

# DIV1 UL Li {

浮点数：左；

宽度：178px；

身高：108px；

列表样式：无；

}





复制代码代码如下所示：



转左

转右





































以上是一个简单的布局，下面是主要的Javaｓｃｒｉｐｔ代码

复制代码代码如下所示：



在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'；

}



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

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

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