How would I go about adding a timer to this js so images would change automatically after 'x' amount of time. As it stands the change is made via 'a href' with the 'rel' attribute, but that function with the 'rel' is still required.

js:

$(document).ready(function (){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').css({left:-1476*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div mystuff (here 160) ------ */
        $('#button a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    }); 
});

html:

<div id="myslide">
<div class="cover">

    <div class="mystuff">
        <img src="images/header_01.jpg" rel="1"></img>
        <img src="images/header_02.jpg" rel="1"></img>
        <img src="images/header_03.jpg" rel="1"></img>
    </div>
</div>

How would I go about adding a timer to this js so images would change automatically after 'x' amount of time. As it stands the change is made via 'a href' with the 'rel' attribute, but that function with the 'rel' is still required.

js:

$(document).ready(function (){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').css({left:-1476*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div mystuff (here 160) ------ */
        $('#button a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    }); 
});

html:

<div id="myslide">
<div class="cover">

    <div class="mystuff">
        <img src="images/header_01.jpg" rel="1"></img>
        <img src="images/header_02.jpg" rel="1"></img>
        <img src="images/header_03.jpg" rel="1"></img>
    </div>
</div>

• javascript
• image
• timer

Share Improve this question Follow edited Dec 20, 2012 at 16:06 Aaron Kurtzhals 2,03633 gold badges1717 silver badges2222 bronze badges asked Aug 16, 2011 at 23:22 CraxCrax 3111 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You should consider using setInterval and and an array of images to change the source. This will force the image to loop continuously

var images = ['header_01.jpg','header_02.jpg','header_03.jpg'], 
    index = 0, // starting index
    maxImages = images.length - 1;
var timer = setInterval(function() {
    var curImage = images[index];
    index = (index == maxImages) ? 0 : ++index;
    // set your image using the curImageVar 
    $('div.mystuff img').attr('src','images/'+curImage);
 }, 1000);

You can use the setTimeout function to call a predefined function to change your images like this:

var changeImage = function (){
<code>
};
var t = setTimeout(changeImage, <time in milliseconds>);

Make sure you are not calling setTimeout(changeImage(), <time in milliseconds>); (note the two parentheses)

This is to be avoided and you should try to use a function instead of a string to be evaluated as the first parameter to setTimeout().

Alternatively, you could use an anonymous function instead of creating changeImage. Ex.

var t = setTimeout(function() { <code>}, <time in milliseconds>);