I am making a simple image slider that runs through a directory containing images. The images is called "img_1", "img_2" and "img_3", so the point is to just iterate through them. The thing I don't get is how to implement a interval though. I want the images appear for 3 seconds, then change. The function "imgSlider" is on body load.

Edit: I am looking for simple solutions (in pure JS) as I am currently learning JS. Sorry for not clarifying it in the question. Lots of good answers here though!

function changeImg(img, i){
 img.setAttribute("src", "img/slider/img_" + i + ".jpg");
}

function imgSlider(){
 var img = document.createElement("img");
 var targetDiv = document.getElementById("slider");

 img.setAttribute("width", "100%");
 img.setAttribute("height", "70%");

 targetDiv.appendChild(img);

 for(i=1; i<4; i++){
     setInterval(changeImg(img, i), 3000);
  }
}

I am making a simple image slider that runs through a directory containing images. The images is called "img_1", "img_2" and "img_3", so the point is to just iterate through them. The thing I don't get is how to implement a interval though. I want the images appear for 3 seconds, then change. The function "imgSlider" is on body load.

Edit: I am looking for simple solutions (in pure JS) as I am currently learning JS. Sorry for not clarifying it in the question. Lots of good answers here though!

function changeImg(img, i){
 img.setAttribute("src", "img/slider/img_" + i + ".jpg");
}

function imgSlider(){
 var img = document.createElement("img");
 var targetDiv = document.getElementById("slider");

 img.setAttribute("width", "100%");
 img.setAttribute("height", "70%");

 targetDiv.appendChild(img);

 for(i=1; i<4; i++){
     setInterval(changeImg(img, i), 3000);
  }
}

• javascript

3 Answers 3

What you need to do is simple, you have to change the setInterval code like this:

$(function () {
  var curImg = 1;
  setInterval(function () {
    $("img").attr("src", "//placehold.it/100?text=" + ++curImg);
  }, 2000);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="//placehold.it/100?text=1" />

Here, I have given an interval of 2 seconds for checking. I have used jQuery only for the updating of image. If you want it in plain JavaScript, it is possible through your code.

Pure JS Version

var curImg = 1;
setInterval(function () {
  document.getElementsByTagName("img")[0].src = "//placehold.it/100?text=" + ++curImg;
}, 2000);

<img src="//placehold.it/100?text=1" />

You can do it this way. Initialize a counter, that will keep a track of current image to being displayed. Now all we need to is call showImage function that will show the image corresponding to the current value of the counter.

Repeat this every 3sec.

var count = 0; 
setInterval( function() { 
   showImage(count); 
   count = (count+1)%total_no_of_images
}, 3000)

setInterval takes a function, you need to pass it a reference to a function that it will run at the appropriate interval.

Also, note that as of this writing, the accepted answer assumes there are infinite images and has an "infinite loop" style of interval, which should be avoided if at all possible. Here, I stop the clock after the fifth image.

const changeImg = (img, i) => {
   img.setAttribute('src', `img/slider/img_${i}.jpg`);
};

const imgSlider = () => {
    const img = document.createElement('img');
    const targetDiv = document.getElementById('slider');

    img.setAttribute('width', '100%');
    img.setAttribute('height', '70%');

    targetDiv.appendChild(img);

    let i = 0;

    const interval = setInterval(
        () => {
            changeImg(img, i);
            i += 1;
            if (i > 4) {
                clearInterval(interval);
            }
        },
        3000
    );
};