标准的js无缝滚动效果
本文实例为大家分享了js无缝滚动效果实现代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>无缝滚动</title>
<style>
#warp{
width:1200px;
height:300px;
overflow:hidden;
margin:100pxauto0;
}
#warp#con{
width:4000px;
height:300px;
overflow:hidden;
}
#warp#con#box1{
float:left;
overflow:hidden;
}
#warp#con#box2{
float:left;
overflow:hidden;
}
#warpimg{
float:left;
width:200px;
height:300px;
}
</style>
</head>
<body>
<divid="warp">
<divid="con">
<divid="box1">
<imgsrc="images/meinv1.jpg"alt="">
<imgsrc="images/meinv2.jpg"alt="">
<imgsrc="images/meinv3.jpg"alt="">
<imgsrc="images/meinv4.jpg"alt="">
<imgsrc="images/meinv5.jpg"alt="">
<imgsrc="images/meinv6.jpg"alt="">
</div>
<divid="box2"></div>
</div>
</div>
<script>
varwarp=document.getElementById('warp');
varcon=document.getElementById('con');
varbox1=document.getElementById('box1');
varbox2=document.getElementById('box2');
//box2.innerHTML=box1.innerHTML;
vartimer1=null,x=0;
functionscroll(){//滚动函数
box2.innerHTML=box1.innerHTML;
timer1=setInterval(function(){
x++;
if(x>=box1.clientWidth){
x=0;
warp.scrollLeft=x;
}
warp.scrollLeft=x;
},10)
}
scroll();
warp.onmouseenter=function(){
clearInterval(timer1);
}
warp.onmouseleave=function(){
scroll();
}
</script>
</body>
</html>
这种效果的主要思想是图片内容部分的宽度要远远大于要展示区域的宽度，使其出现滚动条。复制上一组图片的内容使其在效果上实现无缝滚动，具体的请大家参考代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。