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';
}
这一部分显示图片滚动到一半,很快地将图片向后拉,因为程序执行得如此之快以至于几乎看不到无缝卷。
最后,采用变速控制左右方向的滚动。
上面的代码只实现了最基本的功能,合作伙伴可以在此基础上继续改进它。