<style>
        *{padding: 0; margin: 0;}
        ul li{list-style: none; float: left;}
        #div1{width: 800px; height: 165px; margin: 20px auto; float: left;background: red; position: relative; overflow: hidden;}
        #div1 ul{position: absolute; left: 0; top: 0; margin-top: 5px;}
        #div1 ul li{ float: left; width: 200px; height: 150px;}
        #div1 img{ width: 200px;}
        .main{width: 890px;}
        .main a {float:left; padding-top: 80px;}
    </style>

<script>
        window.onload=function(){
            var oDiv = document.getElementById("div1");
            var oUl = oDiv.getElementsByTagName("ul")[0];
            var oLi = oUl.getElementsByTagName("li");
            var speed = -2;
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
            oUl.style.width = oLi[0].offsetWidth*oLi.length+"px";
            function move(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oUl.style.left='0';
                }
                if(oUl.offsetLeft>0){
                    oUl.style.left=-oUl.offsetWidth/2+'px';
                }
                oUl.style.left = oUl.offsetLeft+speed+"px";
            }
            var timer = setInterval(move,30);
            oDiv.onmouseover = function(){
                clearInterval(timer);
            }
            oDiv.onmouseout = function(){
                timer = setInterval(move,30);
            }
            document.getElementsByTagName("a")[0].onclick=function(){
                speed = -2;
            }
            document.getElementsByTagName("a")[1].onclick=function(){
                speed = 2;
            }
        };
    </script>

<div class="main">
    <a href="javascript:;">向左</a>
    <div id="div1">
        <ul>
            <li><img src="images/1.jpg" width="200px" height="150px" alt=""></li>
            <li><img src="images/2.jpg" width="200px" height="150px" alt=""></li>
            <li><img src="images/3.jpg" width="200px" height="150px" alt=""></li>
            <li><img src="images/4.jpg" width="200px" height="150px" alt=""></li>
        </ul>
    </div>
    <a href="javascript:;">向右</a>
</div>