元素無縫切換

關注點：
cloneNode(true); 子節點所有節點一起複製；
cloneNode(false);不複製子節點下的內容；
思想：移動ul，動態設置ul寬度li.length oneSize，移動ul的距離-iNow oneSize; 每個li的寬度：元素.offsetWidth+1;循環ul.removeChild(元素),一個個刪除，所以總是刪除第一個；
簡陋佈局

<div id="box">
    <ul id="ul">
        <li><div>1</div></li>
        <li><div>2</div></li>
        <li><div>3</div></li>
        <li><div>4</div></li>
        <li><div>5</div></li>
    </ul>
</div>
<input type="button" value="切換" id="input1"/>

window.onload = function () {
    var inp = document.getElementById('input1')
    var box = document.getElementById('box')
    var ul = document.getElementById('ul')
    var li = ul.getElementsByTagName('li')
    var oneSize = li[0].offsetWidth + 1; //li寬度
    var iNum = 4; //一次走多少個元素
    var onoff = true;//連續點擊錯亂bug
    getWidth()
    function getWidth() { //獲取ul寬度方法
        ul.style.width = li.length * oneSize + 'px'
    }
    inp.onclick = function () {
        //cloneNode(),cloneNode(true) 一起複製子節點，cloneNode(false),不會複製子節點
        if (onoff) {
            onoff = false; //一上來 false
            for (var i = 0; i < iNum; i++) {
                var oli = li[i].cloneNode(true);
                ul.appendChild(oli)
                getWidth()
            }
            startMove(ul, {left: -iNum * oneSize}, function () { //運動結束後再刪除前面的，才能循環
                for (var i = 0; i < iNum; i++) {
                    ul.removeChild(li[0]); //刪除
                    ul.style.left = '0'
                }
                onoff = true  //運動線束後可點擊，onoff = true;
            })
        }
    }
}

運行