javascript----改进无缝滚动

添加了当鼠标移动到相应的图片后则方法显示，过一定的时间再自动隐藏。

@{
    ViewBag.Title = "Test1";
}
<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;
    }
    #imgDiv {
        height: 250px;
        width: 300px;
        background-color: red;
        position: fixed;
        z-index: 1;
        top: 180px;
        left: 570px;
        /*background-image: url(../../image/image0.JPG);*/
        /*设置背景图大小*/
        /*background-size: 300px 250px;*/
        display: none;
        border:1px double red;
    }
</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 imgDiv = document.getElementById("imgDiv");
        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';
            }
        }
      
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onmouseover = function ()
            {
                if (this.index < 3)
                {
                    imgDiv.innerHTML = "<img src='../..//image/image" + this.index + ".JPG'  height='250' width='300'/>";         
                }
                else
                {
                    imgDiv.innerHTML = "<img src='../..//image/image" + (this.index-3) + ".JPG'  height='250' width='300'/>";
                }
                imgDiv.style.display = "block";
                 setTimeout(function () { imgDiv.style.display = "none"; }, 500);
            }

        }
     
        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 id="imgDiv"></div>
</div>