從 作者：饑人谷_范悅 那看到的 鏈接：www.lxweimin.com/p/5c7c427eb557
個(gè)人縮減了下，如下：

css：

       *{
            padding:0;
            margin:0;
        }
        li{
            list-style:none;
            float:left;
        }
        .content{
            width:600px;
            height:270px;
            margin:100px auto;
        }
        .content-box{
            width:480px;
            height:270px;
            margin:0 auto;
            position:relative;
            overflow:hidden;
        }
        ul{
            width:2400px;
        overflow:hidden;
            position:absolute;
            left: -480px;
        }
        li img{
            width:480px;
            height: 270px;

        }

html：

 <div class="content">
        <div class="content-box">
            <ul>
                 <li>![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503574592707&di=a3d3ae19930d2c453ec58728e4d6a69a&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_big%2F201504%2F6fb5de53c5ef451980da0632d6b6b83a.jpg)</li>//圖3
                <li>![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503574592707&di=50cb6b3fc2f467b197a42e7fa276d17f&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_big%2F201506%2F5c7a4b9402034d778d3d8886199aebdb.jpg)</li>//圖1
                <li>![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503574592707&di=d133c2777c2e04c404663e00a3fd49cb&imgtype=0&src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F673510.jpg)</li>//圖2
                <li>![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503574592707&di=a3d3ae19930d2c453ec58728e4d6a69a&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_big%2F201504%2F6fb5de53c5ef451980da0632d6b6b83a.jpg)</li>//圖3
                <li>![](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503574592707&di=50cb6b3fc2f467b197a42e7fa276d17f&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_big%2F201506%2F5c7a4b9402034d778d3d8886199aebdb.jpg)</li>//圖1
            </ul>
      </div>
 </div>

js:

//此處記得引入jquery cdn：<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       var n=2;//由于第一張圖是實(shí)際是最后1張，是用于從最后一張到第一張過(guò)度用，所以n=2，從第二張圖開(kāi)始

        $(document).ready(function () {//計(jì)時(shí)器，用于自動(dòng)輪播
                var timer=setInterval(function () {
                    tonext();
                    console.log(n);
                },1000)
            }
        )
//從左向右運(yùn)動(dòng)的函數(shù)，每次調(diào)用向右前進(jìn)一張圖片距離，當(dāng)?shù)竭_(dá)第四張（也就是給觀眾看的第三張），則left跳回第一張（也就是和它一樣的那張，不過(guò)排在開(kāi)頭），由于兩張圖片一樣，可以達(dá)到無(wú)法察覺(jué)的效果
        function  tonext() {
            $('ul').animate({left:-480*n+"px"},function () {
                n++;
                if(n==4){$('ul').css({left:0});n=1}
            })
        }