0

因此，我正在尝试制作我拥有的图像的幻灯片，您可以在其中按下开始按钮来启动计时器。我相信我已经正确编码了所有内容，但它永远不会改变图像。我不确定有什么问题。

<!DOCTYPE html>
<html>
<head><title>Slide Show</title>
    <script type ="text/javascript">
        var i=0;
        var timeout;
        function preLoadImages()
        {
            if (document.images)
            {
                fire = new Array();
                fire[0] = new Image();
                fire[0] = "./images/fire2.jpg";
                fire[1] = new Image();
                fire[1] = "./images/fire3.jpg"
                fire[2] = new Image();
                fire[2] = "./images/fire4.jpg"
                fire[3] = new Image();
                fire[3] = "./images/fire1.jpg"
            }
            else
            {
                alert("There are no images to preload");
            }
        }
        function startSlideshow()
        {
            if (i < fire.length)
            {
                document.images["fire_pic"].src = fire[i];
                i++;
            }
            else
            {
                i = 0;
                document.images["fire_pic"].src = fire[i];
            }
            timeout = setTimeout('startSlideShow()',1000);
        }
        function stopSlideShow()
        {
            clearTimeout(timeout);
        }
    </script>
</head>
<body onload = "preLoadImages()">
    <img name="fire_pic" src="./images/fire1.jpg" height="289" width="432"/>
    <form>
        <br /><br />
        <input type=button value="Start Show" onClick="return startSlideShow();"/>
        <input type=button value="Stop Show" onClick="return stopSlideShow();"/>
    </form>
</body>

4

1 回答 1

0

由于大小写不一致，您会遇到运行时错误startSlideshow：与startSlideShow; 选一个。检查您的浏览器控制台以查看错误。

此外，您的预加载器代码不起作用：您将Image对象添加到数组中，然后立即用字符串覆盖它们。你应该使用：

fire = new Array();
fire[0] = new Image();
fire[0].src = "./images/fire2.jpg";

然后在startSlideShow（或startSlideshow）你应该使用document.images["fire_pic"].src = fire[i].src.

演示包括所有修复。

于 2013-09-16T19:52:16.910 回答