J.chong

簡陋佈局

<ul id="ul"><li><div><p>這是一個百葉窗效果，測試1</p><p>這是一個百葉窗效果，測試2</p></div></li><li><div><p>這是一個百葉窗效果，測試3</p><p>這是一個百葉窗效果，測試4</p></div></li><li><div><p>這是一個百葉窗效果，測試5</p><p>這是一個百葉窗效果，測試6</p></div></li><li><div><p>這是一個百葉窗效果，測試7</p><p>這是一個百葉窗效果，測試8</p></div></li><li><div><p>這是一個百葉窗效果，測試9</p><p>這是一個百葉窗效果，測試A</p></div></li></ul>

    window.onload = function () {
        var ul = document.getElementById('ul')
        var iNow = 0; //從第0個div - 第N個div，有層次變化，需要一個當前值;
        var timer = null;
        var onoff = true;//開關，一次真一次假
        toShow(ul)
        function toShow(obj) {
            var div = obj.getElementsByTagName('div')
            setInterval(function () {
                toChange();//有頻率的變化，層次效果
            }, 2000)
            function toChange() {
                timer = setInterval(function () { //第二個定時器，有層次效果
                    if (iNow == div.length) {  //需要判斷定時器何時結束，所以需要一個tiemr
                        clearInterval(timer);
                        iNow = 0;
                        onoff = !onoff;
                    }
                    else if (onoff) {
                        startMove(div[iNow], {top: 0}); //一次為0，一次為30,所以需要一個開關 onoff
                        iNow++;
                    }
                    else {
                        startMove(div[iNow], {top: -30});
                        iNow++;
                    }
                }, 100)
            }
        }
    }

*{ margin: 0; padding: 0;} li{list-style:none;} #ul{ width: 300px; height: auto;border-top:3px solid #333; margin: 20px auto;text-indent: 1em;} li{ width: 100%; height: 30px; overflow: hidden; position: relative; border-bottom:1px solid #2291AB;line-height: 30px;} li div{ position: absolute; top: -30px;} li div p{ height: 30px;}

運行

簡陋佈局

<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改進版：運行

<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改進版：運行