jQuery image src change every 8 seconds

Question

I have a div with the ID of header, what id like is the first image found in this id to change every 8 seconds. The image name is image1.jpg and after 8 seconds id like it to change image1 to image2 then after another 8 seconds revert back to image1 and so forth.

Is the route of finding the first image in the div etc a bit long winded and how would i go about the rest? For instance getting the src to change every 8 seconds? Help much appreciated

What have you tried so far? Getting the first image element is simply `$('#header img').first()`. As for changing the image: http://stackoverflow.com/questions/10415932/change-jquery-image-src-dynamically/10416038. — Felix Kling, Feb 21 '13 at 11:47
to get the src you can do `var src = $('#header').attr('src');` then change it at will so only thing left would be to have a timeout function that runs every 8 seconds that pulls the next image src, maybe store all src's in an array or something — martincarlin87, Feb 21 '13 at 11:49

Arun P Johny · Accepted Answer · 2013-02-21T12:13:30.247

1

You can try

var $img = $('div#header img').first();
var flag = false;
setInterval(function(){
    $img.attr('src', 'image' + (flag ? 1 : 2) + '.jpeg' );
    flag = !flag;
}, 8000);

Functional Demo: Fiddle (Note: This does not work with image, but just a demo for the technique used. Check the console to see the src value)

edited Feb 21 '13 at 12:13

answered Feb 21 '13 at 11:49

Arun P Johny

384,651
66
527
531

You should use setInterval, @John wanna image `src` changed back – Jefferson Henrique C. Soares Feb 21 '13 at 11:50
@JeffersonHenriqueC.Soares Yes you are right, will make the correction – Arun P Johny Feb 21 '13 at 11:51
1

@JeffersonHenriqueC.Soares updated to support the change back – Arun P Johny Feb 21 '13 at 11:57
@ArunPJohny in that idea it would be easier to use a boolean and do `(flag)?1:2` and to invert the it you do `flag = !flag` instead of doing another if – Hugo Alves Feb 21 '13 at 12:01
Please any one can tell , what going on here ? (flag == 0 ? 1 : 2) – EnterJQ Feb 21 '13 at 12:02
@EnterJQ i thing that line is wrong it should be `((flag == 0)? 1:2)` – Hugo Alves Feb 21 '13 at 12:04
@EnterJQ its the same as `flag = if(flag ==0) 1 else 2` but more nice to read – Hugo Alves Feb 21 '13 at 12:07
@HugoAlves Yes you are right, it would be easier to a boolean flag – Arun P Johny Feb 21 '13 at 12:07
1

@EnterJQ This is the ternary operator http://en.wikipedia.org/wiki/%3F:#JavaScript / http://msdn.microsoft.com/en-us/library/ie/be21c7hw(v=vs.94).aspx – Arun P Johny Feb 21 '13 at 12:08
@ArunPJohny if i later add a third image (being image3) would i just change flag ? 1 : 2 to flag ? 1 : 2 : 3 ? Other than that this works perfectly. Thank you! – John Feb 21 '13 at 12:55
@John No, it won't work like that. I've an updated solution at http://jsfiddle.net/uxZfq/3/ . Here you can decide where to reset the counter based on the iteration you want – Arun P Johny Feb 21 '13 at 13:16

score 1 · Answer 2 · answered Feb 21 '13 at 11:53

assuming the first image is image1.jpeg then at the first run you what it to be 2 so use ++i to increment first then use the var in the string

var i = 0;
setInterval(function() { 
     if(i == 2) i=0;

     $('#imageID').attr('src', 'image' + (++i) + '.jpeg' );
}, 8000);

jQuery image src change every 8 seconds

2 Answers2