How to use .html() with a timer in jQuery?

Question

I want to replace the contents of a div with the values found in an array. I want to keep each value within the div for 3 seconds each. Here's my code so far:

        var images = ['a.jpg', 'b.jpg', 'c.jpg'];

        for (i = 0; i < images.length; i++) {
          $('#slideShow').html("<img src='../"+images[i]+"' alt='' />");
        }

This of course changes the images so fast that the human eye only sees one image being in the div at all times. I want to keep each image for 3 seconds before the next .html() is done on the div. How to do this?

what JCOC611 said, you should consider changing the src attribute of am IMG element rather than injecting new one into the DOM each time — Kris Ivanov
– Kris Ivanov, Commented Feb 12, 2011 at 2:16

JCOC611 · Accepted Answer · 2011-02-12 02:22:31Z

3

Try this:

images = ["a.jpg", "b.jpg", "c.jpg"];

function change(i){
   if(!images[i]){return false}
   else{
     $("#slideShow").src=images[i];
     setTimeout( function(){ change(i+1) }, 3000);
   }
}
change(0);

Haven't tested it but it should work.

edited Feb 12, 2011 at 2:22

answered Feb 12, 2011 at 2:16

JCOC611

19.8k15 gold badges71 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kris Ivanov Over a year ago

should wrap the variable i after array length

user113716 Over a year ago

Your reference to the arguments object will be that of the function passed to the setTimeout instead of that of the change function. Why not just do change(i+1)?

Mark Eirich · Accepted Answer · 2011-02-12 02:20:15Z

1

This answer assumes that you want to loop. If not, comment and I'll rewrite.

<script>
var images = ['a.jpg', 'b.jpg', 'c.jpg'];
var curimage = 0;
function changeImage() {
    $('#slideShow').html("<img src='../"+images[curimage]+"' alt='' />");
    curimage++;
    if (curimage > images.length) curimage = 0;
}
changeImage();
window.setInterval(changeImage, 3000);
</script>

I have tested this answer.

answered Feb 12, 2011 at 2:20

Mark Eirich

10.1k2 gold badges27 silver badges27 bronze badges

3 Comments

user113716 Over a year ago

A little shorter/cleaner way of resetting curimage to 0 would be to use the modulus operator: curimage = ++curimage % images.length

Mark Eirich Over a year ago

@patrick dw: +1 Great point; I like your way better; however, it may be harder for the inexperienced to understand, so for now I'll leave as is....

user113716 Over a year ago

Understood. That's always an important consideration.

Collectives™ on Stack Overflow

How to use .html() with a timer in jQuery?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related