javascript Bildwechsel nach 'x' Zeit

Question

Wie würde ich vorgehen, um einen Timer zu diesem js hinzufügen, so dass Bilder automatisch nach 'x' Menge der Zeit ändern würde. Wie es steht die Änderung über "a href" mit dem "rel"-Attribut gemacht wird, aber diese Funktion mit dem "rel" ist noch erforderlich.

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>

Answer 1

Sie sollten in Betracht ziehen, setInterval und und ein Array von Bildern zu verwenden, um die Quelle zu ändern. Dadurch wird das Bild zu einer Endlosschleife gezwungen

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

Answer 2

Sie können die Funktion setTimeout verwenden, um eine vordefinierte Funktion aufzurufen, die Ihre Bilder wie folgt ändert:

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

Stellen Sie sicher, dass Sie nicht anrufen setTimeout(changeImage(), <time in milliseconds>); (beachten Sie die beiden Klammern)

Dies ist zu vermeiden, und Sie sollten versuchen, eine Funktion statt einer Zeichenkette zu verwenden, die als erster Parameter von setTimeout() ausgewertet wird.

Alternativ können Sie auch eine anonyme Funktion verwenden, anstatt changeImage zu erstellen. Bsp.

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