无缝滚动

写完项目就想多整理几个笔记，无缝滚动第一见是在我大创要改版的项目网站上，当时还不知道它叫无缝滚动，感觉挺有意思的，哈哈~~~

障眼法

<input type="button" name="btn" id="btn" value="向左滚动" />
<input type="button" name="btn1" id="btn1" value="向右滚动" />
<div id="box">
    <div id="list">
        <li><img src="img/album1.jpg" alt="" width="200" height="200" /></li>
        <li><img src="img/album2.jpg" alt="" width="200" height="200"/></li>
        <li><img src="img/album3.jpg" alt="" width="200" height="200"/></li>
        <li><img src="img/album4.jpg" alt="" width="200" height="200"/></li>
        <li><img src="img/album5.jpg" alt="" width="200" height="200"/></li>
        <li><img src="img/album1.jpg" alt="" width="200" height="200"/></li>
        <li><img src="img/album2.jpg" alt="" width="200" height="200"/></li>
        <li><img src="img/album3.jpg" alt="" width="200" height="200"/></li>
        <li><img src="img/album4.jpg" alt="" width="200" height="200"/></li>
        <li><img src="img/album5.jpg" alt="" width="200" height="200"/></li>
    </div>
</div>
#box{
    width: 1060px;
    height: 220px;
    border:3px solid #ddd;
    margin:100px auto;
    position: relative;
    overflow: hidden;
}
#list{
    width: 2120px;
    overflow: hidden;
    position: absolute;
    top:10px;
    left:0;
}
#list li{
    list-style:none;
    float: left;
    margin-left: 10px;
}

效果图：

Paste_Image.png

看到上面的布局你应该知道为什么叫障眼法了吧，就是把5张图片重复一遍，只是给超出部分隐藏了而已

图片滚动起来

var oBox = document.getElementById("box");
var oList = document.getElementById("list");
var timer = null;
var oBtn = document.getElementById("btn");
var oBtn1 = document.getElementById("btn1");
moveL();                               //进入页面就自动向左滚动
var oLe = oList.offsetLeft; 
function moveL(){                    //向左滚动
    clearInterval( timer );
    timer = setInterval( function(){
        oLe -= 5;
        if(  oLe <= -oList.offsetWidth / 2){
            oLe = 0;
        }
        oList.style.left = oLe + 'px';
    } , 30);
    oBox.onmouseover = function(){
        clearInterval( timer );
    }
    oBox.onmouseout = function(){
        moveL();
    }
}
function moveR(){                      //向右滚动
    clearInterval( timer );
    timer = setInterval( function(){
        oLe += 5;
        if(  oLe >= 0){
            oLe = -oList.offsetWidth / 2;
        }
        oList.style.left = oLe + 'px';
    } , 30);
    oBox.onmouseover = function(){
        clearInterval( timer );
    }
    oBox.onmouseout = function(){
        moveR();
    }
}
oBtn1.onclick = function(){
    moveR();
}
oBtn.onclick = function(){
    moveL();
}

效果图：（这个效果图需要动态图才能看到效果）

Paste_Image.png