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

 

转载于:https://www.cnblogs.com/huasonglin/p/7910849.html