javascript image change after 'x' amount o

问题:

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>

回答1:

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

回答2:

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