js实现无缝滚动

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<style>
    /*最好每一個頁面都加*/
    * {
        margin: 0px;
        padding: 0px;
    }
    #all {
        position: relative; /*最大的布局一定要加，不然下面的布局無法設置位置*/
    }
    #div1 {
        margin-left: auto;/*让div居中*/
        margin-right: auto;
        top:200px;

        width: 810px;
        height: 180px;

        background-color: red;
        position: relative;
        overflow: hidden; /*超过当前元素的范围则隐藏超过的部分*/
    }
    #ul1 {
        position: absolute;
    }
        #div1 ul li {
            list-style: none;
            float: left;
            width: 270px;
            height: 180px;
        }
    #btnDiv1 {
        z-index: 1;
        position: absolute;
        left: 280px;
        top: 300px;
       
    }
    #btnDiv2 {
        z-index: 1;
        position: absolute;
        left: 1130px;
        top: 300px;
    }
</style>
<script>
    window.onload = function () {
        var oDiv = document.getElementById("div1");
        var aLi = oDiv.getElementsByTagName("li");
        var oUl = document.getElementById("ul1");
        var leftBtn = document.getElementById("btn1");
        var rightBtn = document.getElementById("btn2");
        var speed = -2;
        var timer = null;

        oUl.innerHTML += oUl.innerHTML;
        //设置ul的宽度
        oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
       
        function move() {
            oUl.style.left = oUl.offsetLeft + speed + 'px';
            if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
                oUl.style.left = '0';
            } else if (oUl.offsetLeft > 0) {
                oUl.style.left = -oUl.offsetWidth / 2 + 'px';
            }
        }
        timer = setInterval(move, 30);
        rightBtn.onclick = function () {
            speed = 2;
        }
        leftBtn.onclick = function () {
            speed = -2;
        }
        oUl.onmouseover = function () {
            clearInterval(timer);
        };
        oUl.onmouseout = function () {
            timer = setInterval(move, 30);
        };
    };


</script>
<div id="all">
   
    <div id="div1">
        <ul id="ul1">
            <li><img src="~/image/image0.JPG" /></li>
            <li><img src="~/image/image1.JPG" /></li>
            <li><img src="~/image/image2.JPG" /></li>
        </ul>
    </div>
    <div id="btnDiv1"><button id="btn1">向左</button></div>
    <div id="btnDiv2"><button id="btn2">向右</button></div>

</div>

 下面为演示所用到的图：270x180