简单实现js无缝滚动效果

2019-11-19 17:43:47

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE html><html lang="en"><head> <meta charset="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: 100px auto;   overflow: hidden;   position: relative;   border: 1px solid red;  }  ul{   width: 400%;   position: absolute;   left: 0;   top: 0;  }  ul li{   float: left;  } </style> <script>  window.onload = function(){  function $(id){ return document.getElementById(id); }   var timer = null;  var num = 0;  timer = setInterval(autoPlay,20);  function autoPlay(){   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> <div class="box" id="scroll">  <ul id="picBox">   <li><img src="images/01.jpg" alt=""></li>   <li><img src="images/02.jpg" alt=""></li>   <li><img src="images/03.jpg" alt=""></li>   <li><img src="images/04.jpg" alt=""></li>   <li><img src="images/01.jpg" alt=""></li>   <li><img src="images/02.jpg" alt=""></li>  </ul> </div></body></html>

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

上一篇：js仿小米手机上下滑动效果

下一篇：完美的js图片轮换效果