无缝滚动

1 概述

无缝滚动效果在网页里特别常见，一般它用来显示一定数量的图片或者与轮播图进行结合，在说无缝滚动实例之前，我们得说说偏移量中的offsetLeft、offsetWidth 、offsetTop和offsetHeight。

1. 偏移量共包括offsetTop、offsetLeft、offsetWidth、offsetHeight

元素：内容大小（width、height）、内边距（padding）、边框（border）、外边距（margin）、滚动条（scroll）

【1】offsetWidth：元素在水平方向上占据的大小，无单位
offsetWidth = border + 元素内容宽度 + padding
= border-left-width + padding-left- width + width + padding-right-width + border-right-width

【2】offsetHeight：元素在垂直方向上占据的大小，无单位
offsetHeight = border + 元素内容高度 + padding
= border-left-height+ padding-left- height+ height+ padding-height-width + border-right-height

注：1. 如果存在垂直滚动条，offsetWidth也包括垂直滚动条的宽度；
2. 如果存在水平滚动条，offsetHeight也包括水平滚动条的高度

【3】offsetTop： 表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
【4】offsetLeft：表示元素的左外边框至offsetParent元素的左内边框之间的像素距离

理解了偏移量，我们就可以开始动手写无缝滚动功能页面。

2 原理

---

2.1 HTML和CSS布局方面

重点注意的地方:

• 1 一定要给运动物体的父元素设置相对定位

#div1 {
/* 运动的父元素设置相对定位 */
position: relative;
overflow: hidden;
width: 712px;
height: 108px;
background-color: blue;
margin: 20px auto;
}

• 2 运动的本体要设置绝对定位

#div1 ul {
/* 运动的物体设置绝对定位 */
position: absolute;
top: 0;
left: 0;
}

2.2 JS部分

要先从布局上理解无缝滚动的原理，在运动的ul元素内本身就有8个li
，但是只显示4个，每次运动时就显示往后的li，但同时随着ui的运动对应的li也会被隐藏，在运动到一个特定位置时（总ul宽度的一半），将li的位置拉回初始位置，使其产生一个可以不断运动的“假象”、这就是无缝滚动的大致原理（我自己理解的），废话少说，上代码吧。

首先，用innerHTML输出一个新的ul，然后计算出ul实际的宽度。

oUl.innerHTML += oUl.innerHTML; //创建2个ul 也就是8个li
oUl.style.width = (aLi[0].offsetWidth) * aLi.length + 'px'; //计算出ul实际宽度

然后，就是重点部分，定义无缝滚动的功能函数，这个自己看代码理解(╥╯^╰╥)

//运动函数(重点)
var speed = -2; //运动方向默认向左
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';
};
var timer = setInterval(move, 30);

接着是移入时暂停方便阅览和移出时继续运动的小功能实现

//移入就暂停
oDiv.onmouseover = function() {
  clearInterval(timer);
};
//移出就运动
oDiv.onmouseout = function() {
  timer = setInterval(move, 30);
};

3 完整代码

---

    
        
        
        
        
    
    
        

            
                向左
                向右
            
            
                慢速
                中速
                快速
            
        

        

            

                

                

                

                

            
        
    

OK，无缝滚动就是这样，经检验没有bug，可以放心食用(～￣▽￣)～