各位大哥！求一段定时滚动的代码

假如页面中一行有五副图像1、2、3、4、5，希望每隔三秒，五副图像自动向前滚动，变成2、3、4、5、6，页面中还是有五副图像，这样的JS代码应该如何去写呢？希望各位大哥，帮帮菜鸟我！

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
        <style>
        img{ height:120px; width:110px; margin:0 5px;}
        </style>
    </head>
    <body>
        <div style="width: 600px; height: 120px; overflow: hidden" id="outer">
            <div style="width: 1200px; height: 120px;" id="inner">
                <div style="width: 600px; height: 120px; float:left;" id="imglist">
                    <img src="http://avatar.profile.csdn.net/2/E/1/2_armstrong005.jpg" style="float:left" />
                    <img src="http://avatar.profile.csdn.net/2/E/1/2_armstrong005.jpg" style="float:left" />
                    <img src="http://avatar.profile.csdn.net/2/E/1/2_armstrong005.jpg" style="float:left" />
                    <img src="http://avatar.profile.csdn.net/2/E/1/2_armstrong005.jpg" style="float:left" />
                    <img src="http://avatar.profile.csdn.net/2/E/1/2_armstrong005.jpg" style="float:left" />
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
    var outer = document.getElementById("outer");
    var inner = document.getElementById("inner");
    var imglist = document.getElementById("imglist");
    inner.appendChild(imglist.cloneNode(true));
    var timer
    function timeout()
    {
        var count = 0;
        var interval;
        function move()
        {
            outer.scrollLeft += 5;
            count += 5;
            if(count>=120) window.clearInterval(interval);
        }
        interval = window.setInterval(move,10)
        if(outer.scrollLeft >= imglist.offsetWidth) outer.scrollLeft = 0;
    }
    timer = window.setInterval(timeout,3000)</script>
    </html>