JavaScript實現圖片輪播的多種方式

輪播一：連續無縫滾動輪播

HTML：

<div id="main">
    <div id="lunbo">
        <ul id="lunbo_son1">
            <li class="img"><img src="img/1.jpg"/></li>
            <li class="img"><img src="img/2.jpg"/></li>
            <li class="img"><img src="img/3.jpg"/></li>
            <li class="img"><img src="img/4.jpeg"/></li>
            <li class="img"><img src="img/5.jpeg"/></li>
            <li class="img"><img src="img/6.jpg"/></li>
            <li class="img"><img src="img/7.jpg"/></li>
            <li class="img"><img src="img/8.jpeg"/></li>
        </ul>
        <ul id="lunbo_son2"></ul>
     </div>
</div>

CSS：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
#main{
    width: 800px;
    height: 250px;
    margin: 0 auto;
    background: palegoldenrod;
    margin-top: 50px;
    overflow: hidden;
}
#lunbo{
    padding: 5px;
    width: 500%;
}
#lunbo_son1,#lunbo_son2{
    float: left;
}
.img{
    float: left;
}
.img img{
    width: 160px;
    height: 240px;
}

JavaScript：

window.onload = function(){
    var d1 = document.getElementById("main");
    var u1 = document.getElementById("lunbo_son1");
    var u2 = document.getElementById("lunbo_son2");
    u2.innerHTML = u1.innerHTML;    
    function go(){
        if(u2.offsetWidth-d1.scrollLeft<=0){    /*offsetWidth:u2可見區域的寬；scrollLeft：d1左邊被卷去的長度*/
            d1.scrollLeft-=u2.offsetWidth;
        } else {
            d1.scrollLeft++;
        }
    }
    var run = setInterval(go,1);
    d1.onmouseover = function(){    /*鼠標進過清除定時器*/
        window.clearInterval(run);
    }
    d1.onmouseout = function(){    /*鼠標移開繼續輪播*/
        run = setInterval(go,1);
    }
}

效果：

最后直接給大家提供一個我自己寫的多功能自定義插件吧，具體的使用方法可以在GitHub里看到，插件可以通過設置屬性實現多種常用的輪播功能。

地址：https://github.com/BillWar/jquery_carousel