无缝衔接的轮播图

当图片自动移动到最后一张时，立刻衔接到第一张
要点：img里多设置一张图，这张图和第一张图一样

   <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            vertical-align: top;
        }

        .box {
            width: 730px;
            height: 454px;
            margin: 100px auto;
            padding: 5px;
            border: 1px solid #ccc;
            background-color: #cccccc;

        }

        .inner {
            width: 730px;
            height: 454px;
            background-color: aliceblue;
            overflow: hidden;
            position: relative;
        }

        .inner ul {
            width: 1000%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .inner li {
            float: left;
            list-style: none;
        }

    </style>

<div class="box" id="box">
    <div class="inner">
        <ul>
            <li><a href="#"><img src="img/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/5.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/6.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/1.jpg" alt=""></a></li>
        </ul>
    </div>
</div>

<script>
    //获取最外面的div
    var box = my$("box");
    //获取相框
    var inner = box.children[0];
    //获取ul
    var ulObj = inner.children[0];
    //获取li
    var liObjs = ulObj.children;


    //显示和隐藏左右焦点
    clearInterval(timeId);
    box.onmouseover = function () {
        //清除定时器
        clearInterval(timeId);
    };
    box.onmouseout = function () {
        //重新设置定时器
        timeId = setInterval(f1, 25);
    };
    var current = 0;
    function f1() {
        current -= 10;
        //如果当前位置小于所有图片的宽的和就说明所有图片都移到最左
        if (current < -inner.offsetWidth*(liObjs.length-1)) {
            //就让图片重新回到0的位置
            ulObj.style.left = 0 + "px";
            //重新设定当前位置为0
            current = 0;
        }else {
            ulObj.style.left = current + "px";
        }
    }
    var timeId = setInterval(f1, 1000);

</script>