标准的js无缝滚动效果

2019-11-20 09:07:43

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js无缝滚动效果实现代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> #warp{  width: 1200px;  height: 300px;  overflow: hidden;  margin:100px auto 0; } #warp #con{  width: 4000px;  height: 300px;  overflow: hidden; } #warp #con #box1{   float: left;   overflow: hidden; } #warp #con #box2{   float: left;   overflow: hidden; } #warp img{  float: left;  width: 200px;  height: 300px; } </style></head><body> <div id="warp">  <div id="con">   <div id="box1">    <img src="images/meinv1.jpg" alt="">    <img src="images/meinv2.jpg" alt="">    <img src="images/meinv3.jpg" alt="">    <img src="images/meinv4.jpg" alt="">    <img src="images/meinv5.jpg" alt="">    <img src="images/meinv6.jpg" alt="">   </div>   <div id="box2"></div>  </div> </div> <script>  var warp=document.getElementById('warp');  var con=document.getElementById('con');  var box1=document.getElementById('box1');  var box2=document.getElementById('box2');  // box2.innerHTML=box1.innerHTML;  var timer1=null,x=0;  function scroll(){//滚动函数  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>

这种效果的主要思想是图片内容部分的宽度要远远大于要展示区域的宽度，使其出现滚动条。复制上一组图片的内容使其在效果上实现无缝滚动，具体的请大家参考代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js改变透明度实现轮播图的算法

下一篇：js实现按钮控制带有停顿效果的图片滚动