Slide Show using JS array

Question

The image is not get loaded by this code any improvement needed? image url is stored into array for accessing that we required something?

<script>
    var images = ["lap2.png", "lap1.png", "tv1.png", "tv2.png"];
    var i;

    function slides() {
        for (i = 0; i < 4; i++) {
            setInterval(function() {
                document.getElementById('slider').src = "" + images[i];
            }, 8000);
        }

    }
</script>
<!--HTML CODE-->
<p id="slide"><img src="lap1.png" id="slider" onload="this.onload=null; 
this.src=slides();" multiple>
</p>

have you tried build the relative path to it? What error do you get? — Aalexander, Jan 16 '21 at 08:10
@Alex I tried to use a relative path instead of giving an array variable there direct path will work but not with variable — Rucha Dixit, Jan 16 '21 at 08:45
@PaulRooney Ok I'll use setTimeout but, is there any error while passing the array object? — Rucha Dixit, Jan 16 '21 at 08:52
@RokoC.Buljan I just added it for my testing purpose sorry but do not consider it I'm a beginner in javascript any help would be appreciated thanks — Rucha Dixit, Jan 16 '21 at 08:56
Please see [How do I add a delay in a JavaScript loop?](https://stackoverflow.com/q/3583724/4642212). The empty string in `"" + images[i]` serves no purpose; remove it. — Sebastian Simon, Jan 16 '21 at 09:00

Daniil Loban · Accepted Answer · 2021-01-16T08:52:03.457

0

 var images = ["1.png", "2.png", "3.png", "4.png"];
 let i=0;
 setInterval(function() {
   i = i < images.length -1 ? i + 1 : 0; 
   document.getElementById('slide').src =  `http://placehold.it/300x150?text=${images[i]}`;
 }, 1000);

<img id="slide" src="http://placehold.it/300x150?text=1.png"></img>

edited Jan 16 '21 at 08:52

answered Jan 16 '21 at 08:45

Daniil Loban

4,165
1
14
20

Slide Show using JS array

1 Answers1