简单实现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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。