基于JavaScript实现无缝滚动效果

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

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

代码：

 
 
  
 *{
  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;
 }
 
 


 向左
 向右
 
  

   

   

   

   

  
 

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