寫完項(xiàng)目就想多整理幾個(gè)筆記，無(wú)縫滾動(dòng)第一見是在我大創(chuàng)要改版的項(xiàng)目網(wǎng)站上，當(dāng)時(shí)還不知道它叫無(wú)縫滾動(dòng)，感覺挺有意思的，哈哈~~~

障眼法

<input type="button" name="btn" id="btn" value="向左滾動(dòng)" />
<input type="button" name="btn1" id="btn1" value="向右滾動(dòng)" />
<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

看到上面的布局你應(yīng)該知道為什么叫障眼法了吧，就是把5張圖片重復(fù)一遍，只是給超出部分隱藏了而已

圖片滾動(dòng)起來(lái)

var oBox = document.getElementById("box");
var oList = document.getElementById("list");
var timer = null;
var oBtn = document.getElementById("btn");
var oBtn1 = document.getElementById("btn1");
moveL();                               //進(jìn)入頁(yè)面就自動(dòng)向左滾動(dòng)
var oLe = oList.offsetLeft; 
function moveL(){                    //向左滾動(dòng)
    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(){                      //向右滾動(dòng)
    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();
}

效果圖：（這個(gè)效果圖需要?jiǎng)討B(tài)圖才能看到效果）

Paste_Image.png