本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt; style>
* {
保证金:0;
填充:0;
}
ul {
list-style:没有;
}
img {
vertical-align:最高;/*消除3 px的距离*/}
.box {
宽度:600 px;
身高:200 px;
保证金:100 px的汽车;
溢出:隐藏;
位置:相对;
边界:1 px固体红;
}
ul {
宽度:400%;
位置:绝对的;
左:0;
上图:0;
}
ul李{
浮:左;
}
& lt;/style>
& lt; script>
窗口。onload=function () {
函数(id){美元返回. getelementbyid (id);}
var计时器=零;
var num=0;
计时器=setInterval(播放、20);
函数自动播放(){
num -;
如果(num<=-1200) {
num=0;
}
(“picBox”) .style美元。左=num +“px”;
}
$ (" picBox”)。onmouseover=function () {
clearInterval(计时器);
}
$ (" picBox”)。onmouseout=function () {
计时器=setInterval(播放、20);
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div类="盒子" id=肮龆北?
& lt; ul id=皃icBox”比;
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/01.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/02.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/03.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/04.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/01.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/02.jpg " alt="祝辞& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/body>
& lt;/html>之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
