javascript幻灯片的图像数组未显示

我正在使用javascript进行幻灯片演示以进行课程分配,并且可以进行幻灯片演示,但是未显示图像。我可以看到图像图标发生了变化,但实际图像没有显示。

<script type="text/javascript">
        //put images in array
        var pics = new Array();
        pics[0] = new Image();
        pics[0].src = "images/forest.jpg";
        pics[1] = new Image();
        pics[1].src = "images/mountains.jpg";
        pics[2] = new Image();
        pics[2].src = "images/nature.jpg";
        pics[3] = new Image();
        pics[3].src = "images/snowtops.jpg";
        var index = 0; //start point
        var piclength = pics.length - 1;

        function slideshow() {
            document.slide.src = pics[index];
            if (index < piclength) {
                index++;
            }
            else {
                index = 0;
            }
        }

        function slide() {
            setInterval(slideshow,3000);
        }
    </script>

<body onload="slide()">
    <h1>Nature Photography</h1>
    <main>
        <section>
            <p>I am an enthusiastic about nature photography. Here is a slideshow of my 
works.</p>
            <aside> <img id="myImage" src="images/forest.jpg" name="slide" width="95%"> 
</aside>
taolongyang1 回答:javascript幻灯片的图像数组未显示

首先,我将script标记放在HTML后面。这样,您就可以缓存DOM元素,而不必等待“ DOMContentLoaded”事件或“ load”(窗口)事件被触发。
其次,您应该缓存“ myImage”元素。类似于const slider = document.getElementById('myImage')。 第三,检查您的控制台。也许您的图片网址有误?并确保您的HTML有效。在您发布的内容中,您丢失了很多东西(文档类型,html / head标签,没有关闭body标签等)

本文链接:https://www.f2er.com/3131543.html

大家都在问