簡陋佈局

<div id="box">
    <ul>
        <li><img src="../img/hw-1.png" alt=""/></li>
        <li><img src="../img/hw-2.png" alt=""/></li>
        <li><img src="../img/hw-3.png" alt=""/></li>
    </ul>
    <div id="btn">
        <a href="javascript:;" class="active"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>

当可视区只有一张图片时，可使用该方法；当走完最后一张一个像素时；突然把第一张改为相对定位，放在最后面，即left值 = li.length * imgwidth; 当走完第一张时，再把相对定位取消，【重新放回第一位】：要点切换的视觉效果只是一个：最后一个到第一个之间；第一张图在static与relative之间切换；即在第一位与最后一位之间切换，视觉效果只为最后一张到第一张之间；

    window.onload = function () {
        var box = document.getElementById('box');
        var ul = box.getElementsByTagName('ul')[0];
        var li = ul.getElementsByTagName('li');
        var img = ul.getElementsByTagName('img');
        var btn = document.getElementById('btn');
        var a = btn.getElementsByTagName('a');
        var imgwidth = img[0].offsetWidth; //1920
        ul.style.width = imgwidth * img.length + 'px';

        toReSize();
        window.onresize = function () { //改變瀏覽器大小時
            toReSize();
        }
        function toReSize() {
            var vWidth = document.documentElement.clientWidth;//瀏覽器窗口大小
            if (vWidth > 1000) {    //可視區大小
                for (var i = 0; i < img.length; i++) {  //三個圖片都居中
                    img[i].style.left = -((imgwidth - vWidth) / 2 ) + 'px'
                } //圖片寬度 - 可寬區大小 的一半
            }
        }
        for (var i = 0; i < a.length; i++) {
            a[i].index = i//0,1,2
            a[i].onclick = function () {
                for (var i = 0; i < a.length; i++) { //清空全部
                    a[i].className = ''
                }
                this.className = 'active'//當前加
                startMove(ul, {left: -this.index * imgwidth})
            }
        }
        //自動播放 開定時器,找一個變量進行累加
        var iNow = 0;  //iNow 即可看作屬性，給定時器使用，同時也造成循環的條件 inow是循環按鈕的
        var iNow2 = 0;  // [最後到第一個的無縫切換]
        setInterval(toRun, 5000);
        function toRun() {
            if (iNow == a.length - 1) {
                //1、走到最後一個時，把第一個改成定位，即把第一個放在所有圖片後面  [最後到第一個的無縫切換]
                li[0].style.position = 'relative'
                li[0].style.left = li.length * imgwidth + 'px'
                iNow = 0;
            }
            else {
                iNow++   //需要判斷，不然3個後出錯
            }
            iNow2++ //再往後累加 [最後到第一個的無縫切換]
            for (var i = 0; i < a.length; i++) { //先還原按鈕
                a[i].className = ''
            }
            a[iNow].className = 'active';
            startMove(ul, {left: -iNow2 * imgwidth}, function () { //2、走完第一個時取消定位
                if (iNow == 0) {
                    li[0].style.position = 'static'
                    ul.style.left = 0; //拉回，還原之前的樣式
                    iNow2 = 0; //iNow2要循環不能一直累加。
                }
            }) // function (){} 鏈式操作 [最後到第一個的無縫切換]
        }
    }
*{margin:0;padding:0}#box{height:540px;position:relative;overflow:hidden}#box ul{position:absolute;left:0}#box ul li{list-style:none;float:left}#box ul li img{position:relative;left:0}#btn{position:absolute;width:100%;text-align:center;bottom:10px}#btn a{cursor:pointer;display:inline-block;width:11px;height:11px;background:#666;border-radius:50%}#btn .active{background:#fff}#btn a:hover{background:#fff}

運行

JS改進版：運行


JQ版，固定html，所謂帶點幼稚的封裝；

<div class="elmokSlide">
    <div class="hd">
        <ul></ul>
    </div>
    <div class="bd">
        <ul>
            <li><img src="http://elmok.com/img/mmb1.png" alt=""/></li>
            <li><img src="http://elmok.com/img/mmb2.png" alt=""/></li>
            <li><img src="http://elmok.com/img/mmb3.png" alt=""/></li>
        </ul>
    </div>
    <div class="pn">
        <a href="javascript:;"> < </a>
        <a href="javascript:;"> > </a>
    </div>
</div>

調用：

    var el = new Elmokslide('.elmokSlide')
    el.eslide({
        'hd': true, //底部點點點
        'lr': true, //左右方向
        'auto': true //自動播放
    })

JQ改進版：運行