如何制作一个页面让多个图片轮换显示

比如有四个图片，要让它们每隔一定时间间隔轮换显示。
1.使用 getElementByid() 方法和 display 属性控制图片显示和隐藏；
2.使用for循环控制图片显示顺序;
3.使用setInterval() 控制图片显示时间间隔。

解决方案 »

  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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    var ar = [
    'http://w3help.org/zh-cn/logo/google.gif',
    'http://w3help.org/zh-cn/logo/w3c-china.gif',
    'http://w3help.org/zh-cn/logo/firefox.gif',
    'http://w3help.org/zh-cn/logo/csdn.gif'
    ];
    var index = 0;function showImg() {
    document.getElementById('imgContainer').innerHTML = '<img src="' + (ar[++index % ar.length]) + '" />';
    }window.onload = function() {
    window.setInterval('showImg()', 2000); //每两秒钟切换一次
    }
    </script>
    </head><body>
    <div id="imgContainer"></div>
    </body>
    </html>
      

  2.   

    感谢你的回答，但是没有用到for循环？还有就是我是新手，刚接触JS， “<img src="' + (ar[++index % ar.length]) + ”这段代码真的看不懂，有没更简单一点的方法？谢谢！