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

问题描述 投票:0回答:1

我正在使用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>
javascript html arrays image slideshow
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.