CODEWITHSUNDEEP
javascriptimagetimer
Crax
Crax

Reputation: 31

javascript image change after 'x' amount of time

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>

Upvotes: 3

Views: 7739

Answers (2)

uadnal
uadnal

Reputation: 11445

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);

Upvotes: 5

Evan Layman
Evan Layman

Reputation: 3721

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>);

Upvotes: 0

Related Questions