How do I change images every 6 seconds?

Question

How do I add an interval to the below code so it does it change images automatically every 6 seconds?

I use this code from fearlessflyer.com

$(window).load(function () {
    var theImage = $('ul li img');
    var theWidth = theImage.width();

    //wrap into mother div
    $('ul').wrap('<div id="mother" />');

    //assign height width and overflow hidden to mother
    $('#mother').css({
        width: function () {
            return theWidth;
        },
        height: function () {
            return theImage.height();
        },
        position: 'relative',
        overflow: 'hidden'
    });

    //get total of image sizes and set as width for ul 
    var totalWidth = theImage.length * theWidth;

    $('ul').css({
        width: function () {
            return totalWidth;
        }
    });

    $(theImage).each(function (intIndex) {
        $(this).nextAll('a')
            .bind("click", function () {
            if ($(this).is(".next")) {

                $(this).parent('li').parent('ul').animate({
                    "margin-left": (-(intIndex + 1) * theWidth)
                }, 1000)
            } else if ($(this).is(".previous")) {

                $(this).parent('li').parent('ul').animate({
                    "margin-left": (-(intIndex - 1) * theWidth)
                }, 1000)
            } else if ($(this).is(".startover")) {

                $(this).parent('li').parent('ul').animate({
                    "margin-left": (0)
                }, 1000)
            }
        }); //close .bind()                                   
    }); //close .each()                      
}); //doc ready

Are you looking for somethin like [this](http://jsbin.com/ewupey/1)? — Praveen Gowda I V, Jun 28 '13 at 20:27
I'd really recommend using [jQuery Cycle](http://malsup.com/jquery/cycle/) for this. — prodigitalson, Jun 28 '13 at 20:42

score 1 · Answer 1 · answered Jun 28 '13 at 20:40

1

Here is an extended answer

var intNum = 6000; //repeat every 6 seconds
function startInterval(){
    window.int = setInterval(function(){
        //code to move to next image
    },intNum);
}

That will set the interval for the image, going to the next automatically, small adjustments might be needed when comparing to your click event for the switch, so I left the inside blank.

the function startInterval() should be called when you know that the rest of the code is loaded and ready (click events are set, ect).

When you do a click event to manually switch back and forth you want to use the following

clearInterval(int);

//code to switch image from click

startInterval();

answered Jun 28 '13 at 20:40

Jordan Ramstad

169
3
8
37

I try pating the code in the – Roberto Mauricio Jun 28 '13 at 22:18
I tryied pasting the code in betewwen yours from the begginning to the end and it didnt work. or what should i paste on "//code to move to next image"? cant there sjut be something call the function ".bind("click", function () {" or something to add inbetween? – Roberto Mauricio Jun 28 '13 at 22:22
Basically you want to adjust your code to run as if you clicked "next" in there. and you need to call the function "startInterval()" somehwhere to make this run – Jordan Ramstad Jun 29 '13 at 07:48
1

@Roberto: You only put the code in the callback which should be executed every X seconds. In order to do that you probably have to understand the code you are using. Take your time to understand it and read the jQuery documentation. Otherwise you will struggle a lot with it in the long run. – Felix Kling Jun 29 '13 at 08:20

score 1 · Answer 2 · answered Jun 28 '13 at 20:40

You need to use the setInterval() function.

Basically, it would look something like:

var currentImg=0;//Current image tracker
var imgList["img1.jpg","img2.jpg","img3.jpg"];//Image names

var changeImage = function(){
     //Change src attribute on img element
     $('ul li img').attr('src','/imgdir/'+imgList[currentImg]);
     if(currentImg>=imgList.length-1)//Check if current image is the last in the list
         currentImg=0;//Sets to first images if true
     else
         currentImg++;//Sets to next image if false
}
//Sets an interval of 6000ms on the window object that calls the function changeImage()
//on every trigger
window.setInterval(changeImage(),6000);

MDN Reference

Hope this helps, I'd suggest checking out the jQuery Documentation aswell...

score 0 · Answer 3 · answered Jun 28 '13 at 20:24

0

Use the setInterval() javascript function, as explained here.

answered Jun 28 '13 at 20:24

foobarbecue

6,780
4
28
54

3

Please don't reference w3school (because of http://www.w3fools.com) – Irvin Dominin Jun 28 '13 at 20:25
1

Ok, didn't know about the w2schools issues. I changed the reference to mozilla's docs. – foobarbecue Jun 28 '13 at 20:28
Sorry I don't understand the code where should I add that to? Help – Roberto Mauricio Jun 28 '13 at 20:34

How do I change images every 6 seconds?

3 Answers3