简单实现js无缝滚动效果
本文实例为大家分享了js无缝滚动效果的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
img{
vertical-align:top;/*消除3px的距离*/
}
.box{
width:600px;
height:200px;
margin:100pxauto;
overflow:hidden;
position:relative;
border:1pxsolidred;
}
ul{
width:400%;
position:absolute;
left:0;
top:0;
}
ulli{
float:left;
}
</style>
<script>
window.onload=function(){
function$(id){returndocument.getElementById(id);}
vartimer=null;
varnum=0;
timer=setInterval(autoPlay,20);
functionautoPlay(){
num--;
if(num<=-1200){
num=0;
}
$("picBox").style.left=num+"px";
}
$("picBox").onmouseover=function(){
clearInterval(timer);
}
$("picBox").onmouseout=function(){
timer=setInterval(autoPlay,20);
}
}
</script>
</head>
<body>
<divclass="box"id="scroll">
<ulid="picBox">
<li><imgsrc="images/01.jpg"alt=""></li>
<li><imgsrc="images/02.jpg"alt=""></li>
<li><imgsrc="images/03.jpg"alt=""></li>
<li><imgsrc="images/04.jpg"alt=""></li>
<li><imgsrc="images/01.jpg"alt=""></li>
<li><imgsrc="images/02.jpg"alt=""></li>
</ul>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
热门推荐
10 祝女儿简短祝福语大全
11 大学新年祝福语简短创意
12 元旦适合的祝福语简短
13 朋友出远门祝福语简短
14 初六简短的祝福语
15 祝男孩生日祝福语简短
16 同事调离的祝福语简短
17 拜年红包的祝福语简短
18 妈妈生日祝福语简短励志