Javascript image slideshow using a for loop

Question

i'm trying to cycle through 3 images using a for loop in javascript. Here is my code:

<img name="slide" width="300" height="300">

var i=0;
var images = [];

images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";

function changeImage () {

    for(i=0; i < images.length; i++) {
        document.slide.src = images[i]; 
    }
}


window.onload = changeImage;

Currently, only image 3 is displayed. Anyone know what i'm doing wrong here?

rorymorris89 · Accepted Answer · 2017-03-25T00:14:34.353

2

Yes - this is because your for loop run finishes instantly so there's no time for slides 1 and 2 to be shown.

Give this a try:

var currentImage = 0,
images = [
    "https://unsplash.it/200/300?image=100",
    "https://unsplash.it/200/300?image=101",
    "https://unsplash.it/200/300?image=102"
];

function initSlideshow() {  
    setImage(0);
    setInterval(function(){
        nextImage();
    },1000);
}

function nextImage() {
    if(images.length === currentImage + 1){
        currentImage = 0;
    } else {
        currentImage++;
    }
    setImage(currentImage);
}

function setImage(image) {
    document.querySelectorAll('.slide')[0].src = images[image];
}

window.onload = initSlideshow();

Example: https://jsfiddle.net/vvbdwazc/

edited Mar 25 '17 at 00:14

answered Mar 25 '17 at 00:04

rorymorris89

1,144
7
14

Honestly man i'm a newb. How do i go about prolonging the loop to include the other two slides? – Brixsta Mar 25 '17 at 00:07
I'm writing a bit of code for you now, will update answer shortly :) – rorymorris89 Mar 25 '17 at 00:07
@rorymorris89 have a look at my answer. – Ousmane D. Mar 25 '17 at 00:14
Brixsta give this a try. – rorymorris89 Mar 25 '17 at 00:15

Ousmane D. · Answer 2 · 2017-03-25T00:35:31.740

1

Currently, only image 3 is displayed. Anyone know what i'm doing wrong here?

it's all being displayed but the reason why you can only see the 3rd image is because you're not pausing for a certain time before displaying the next image hence it seems like it's not working.

use setInterval() method to show each image after a specified time.

Example:

var i=0;
var images = [];

images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";

function changeImage () {
    for(i=0; i < images.length; i++) {
        document.slide.src = images[i]; 
    }
}

var myVar = setInterval(function(){ changeImage() }, 1000);

You may later wish to prevent the setInterval() method from executing any longer in that case have a look at clearInterval().

edited Mar 25 '17 at 00:35

answered Mar 25 '17 at 00:11

Ousmane D.

54,915
8
91
126

1

hmm that doesn't seem to work. pausing on a blank image briefly, and then goes to image 3 where it stays. – Brixsta Mar 25 '17 at 00:14
@Brixsta I know you've got the problem solved but see edit. – Ousmane D. Mar 25 '17 at 00:35

vmcruz · Answer 3 · 2017-03-25T00:24:20.693

This is because the for works so fast it gets quickly to the third image. You could use instead some setInterval like this:

<img id="slide" width="300" height="300">
<script>
    var images = [];

    images[0] = "images/1.jpg";
    images[1] = "images/2.jpg";
    images[2] = "images/3.jpg";

    var i = 0;
    setInterval(function() {
        var slide = document.querySelector("#slide"); //Select the img element by ID
        slide.src = images[i++];
        if(i > images.length - 1)
            i = 0;
    }, 1000); //Time in milliseconds
</script>

This will change constantly back to the first image when it reaches the last one.

Edit: Forgot to mention. setInterval works like a "repeater", it will work indefinitely until you clear it. To clear it you need to asign it to a variable and then use clearInterval passing the variable.

var interval = setInterval(function(){}, 1000) //example
clearInterval(interval);

Like so.

Thanks for the help guys, I gotta wrap my head around this stuff. — Brixsta, Mar 25 '17 at 00:23

score 0 · Answer 4 · edited May 23 '17 at 11:46

0

window.onload = changeImage; tells me you want to change the image on page load event? In other words, the image changes only upon page load (or refresh).

Since state is not maintained by default (eg local storage or session storage or cookies) your best bet would be to use a random generator to choose randomly. See Generating random whole numbers in JavaScript in a specific range?

edited May 23 '17 at 11:46

Community

1
1

answered Mar 25 '17 at 00:17

Ronnie Royston

16,778
6
77
91

Javascript image slideshow using a for loop

4 Answers4