Массив изображений для слайдшоу JavaScript не отображается - PullRequest
Новая
       19

Массив изображений для слайдшоу JavaScript не отображается

0 голосов
/ 09 ноября 2019

Я делаю слайд-шоу в 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>

1 Ответ

0 голосов
/ 09 ноября 2019

Во-первых, я бы поставил тег script после вашего HTML. Это позволит вам кэшировать элементы DOM, не дожидаясь запуска события «DOMContentLoaded» или «load» (окно). Во-вторых, вы должны кэшировать элемент «myImage». Что-то вроде const slider = document.getElementById('myImage'). В-третьих, проверьте вашу консоль. Может быть, ваши URL изображения неверны? И убедитесь, что ваш HTML действителен. Из того, что вы опубликовали, вы упускаете множество вещей (теги doctype, html / head, вы не закрывали тег body и т. П.)

...