js无缝衔接图片出现抖动问题

Question

 一组图片播放完出现抖动，如何解决呀？

```html
<div class="list_con" id="slide">
            <ul id="list">
                <li><a href=""><img src="../images/建筑.jpg" alt=""></a></li>
                <li><a href=""><img src="../images/建筑.jpg" alt=""></a></li>
                <li><a href=""><img src="../images/建筑.jpg" alt=""></a></li>
                <li><a href=""><img src="../images/建筑.jpg" alt=""></a></li>
                <li><a href=""><img src="../images/建筑.jpg" alt=""></a></li>
            </ul>
      </div>

css

.list_con {
    width: 1000px;
    height: 200px;
    /* border:1px solid #000; */
    margin: 10px auto 0;
    background-color: #f0f0f0;
    position: relative;
    top: 145px;
    overflow: hidden;
}

.list_con ul {
    list-style: none;
    width: 3200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
}


.list_con li {
    width: 300px;
    height: 180px;
    float: left;
    margin: 6px;
}

.list_con li img{
    width: 300px;
    height: 190px;
  /* border: 5px solid transparent; */
}
.btns_con {
    width: 1000px;
    height: 30px;
    margin: 50px auto 0;
    position: relative;
}

js

window.onload = function(){
            var oLeft = document.getElementById('btn01');
            var oRight = document.getElementById('btn02');
            var oUl = document.getElementById('list');
            var oSlide =  document.getElementById('slide');

            /* 复制Ul中的li */
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

            var iLeft = 0;
            var iSpeed = -3;
            var oTime = setInterval(fnMove,30);
            function fnMove(){
                iLeft += iSpeed;
                oUl.style.left = iLeft +'px';

                if(iLeft <-1000){
                    iLeft = 0;
                }
                if(iLeft > 0){
                    iLeft = -1000;
                }
            }

            /* 鼠标悬浮事件 */
            oSlide.onmouseover = function(){
                clearInterval(oTime);
            }

            /* 鼠标离开事件 */
            oSlide.onpointerout = function(){
                oTime = setInterval(fnMove,30);
            }

        }

```

Answer 1

要知道未复制html时的ul原始宽度（包括margin，padding，border-width），当滚动完原始宽度后设置left为0从头滚动从而不会闪动，而且应该复制slide的innerHTML，不是list的。要复制lst的需要将ul的padding去掉，示例如下

<style>
    .list_con {
        width: 1000px;
        height: 200px;
        /* border:1px solid #000; */
        margin: 10px auto 0;
        background-color: #f0f0f0;
        position: relative;
        top: 145px;
        overflow: hidden;
    }

    .list_con ul {padding:0;/*去掉padding*/
        list-style: none;
        height: 200px;
        position: absolute;
        left: 0;
        top: 0;
    }


    .list_con li {
        width: 300px;
        height: 180px;
        float: left;
        margin: 6px;
    }

    .list_con li img {
        width: 300px;
        height: 190px;
        /* border: 5px solid transparent; */
    }

    .btns_con {
        width: 1000px;
        height: 30px;
        margin: 50px auto 0;
        position: relative;
    }
 
</style>
<div class="list_con" id="slide">
    <ul id="list">
        <li><a href=""><img src="../images/建筑.jpg" alt="1"></a></li>
        <li><a href=""><img src="../images/建筑.jpg" alt="2"></a></li>
        <li><a href=""><img src="../images/建筑.jpg" alt="3"></a></li>
        <li><a href=""><img src="../images/建筑.jpg" alt="4"></a></li>
        <li><a href=""><img src="../images/建筑.jpg" alt="5"></a></li>
    </ul>
</div>
<script>
    window.onload = function () {
        var oLeft = document.getElementById('btn01');
        var oRight = document.getElementById('btn02');
        var oUl = document.getElementById('list');
        var scrollWidth = 1560;//原始的list对象总宽度，这里开发工具直接得到了，要计算也是可以的，用window.getComputedStyle，题主自己去了解下
        oUl.style.width = scrollWidth * 2 + 'px';//通过原始宽度设置总宽度
        var oSlide = document.getElementById('slide');

        /* 复制Ul中的li */
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

        var iLeft = 0;
        var iSpeed = -3;
        var oTime = setInterval(fnMove, 30);
        function fnMove() {
            iLeft += iSpeed;
            if (Math.abs(iLeft) >= scrollWidth) iLeft = 0;
            oUl.style.left = iLeft + 'px';
            return;
            if (iLeft < -1000) {
                iLeft = 0;
            }
            if (iLeft > 0) {
                iLeft = -1000;
            }
        }

        /* 鼠标悬浮事件 */
        oSlide.onmouseover = function () {
            clearInterval(oTime);
        }

        /* 鼠标离开事件 */
        oSlide.onpointerout = function () {
            oTime = setInterval(fnMove, 30);
        }

    }
 
</script>