基于JavaScript实现无缝滚动效果

2019-11-19 16:01:45

字体：大中小

来源：转载

供稿：网友

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

首先应该区分样式中的绝对定位和相对定位，一般来说，移动的单位为绝对定位，在这个实例中，移动的Ul就是绝对定位，否则它根本无法滚动，而它相对于div1滚动，则div1就作为他的相对定位。
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;这段代码是实现无缝滚动的核心，使之可以在不论左右滚动的时候都有下一步图片接上去。
在操作或者进行比较的时候，都要用offset取值来进行操作或者比较！！！

代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无缝滚动2</title> <style type="text/css">  *{  padding: 0;  margin:0; } #div1{  position: relative;  width: 800px;  height: 200px;  background:red;  margin:100px auto;  overflow: hidden; } #div1 ul{  position: absolute;  left: 0;  top: 0; } #div1 ul li{  float: left;  list-style: none;  width: 200px;  height: 200px; } </style> <script type="text/javascript"> window.onload=function() {  var oDiv = document.getElementById('div1');  var oUl = oDiv.getElementsByTagName('ul')[0];  var aLi = oDiv.getElementsByTagName('li');  var aA = document.getElementsByTagName('a');  var speed = 3;  oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;  oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';  var timer=setInterval(move,30);  function move()  {    if (oUl.offsetLeft<=-oUl.offsetWidth/2) {    oUl.style.left="0";    }     if(oUl.offsetLeft>0){     oUl.style.left=-oUl.offsetWidth/2+'px';    }    oUl.style.left=oUl.offsetLeft+speed+'px';  };  oDiv.onmouseover=function()  {   clearInterval(timer);  };  oDiv.onmouseout=function()  {   timer=setInterval(move,30);  };  aA[0].onclick=function()  {   speed=-3;  };  aA[1].onclick=function()  {   speed=3;  }; }; </script></head><body> <a href="javascript:;">向左</a> <a href="javascript:;">向右</a> <div id="div1">  <ul>   <li><img src="images/n1.jpg"></li>   <li><img src="images/n2.jpg"></li>   <li><img src="images/n3.jpg"></li>   <li><img src="images/n4.jpg"></li>  </ul> </div></body></html>

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

上一篇：bootstrap多层模态框滚动条消失的问题

下一篇：基于JavaScript实现选项卡效果