изменение изображения javascript через 'x' промежуток времени

Question

Как бы мне добавить добавление таймера к этому js, чтобы изображения менялись автоматически через 'x' промежуток времени. В нынешнем виде изменение производится через 'href' с атрибутом 'rel', но эта функция с 'rel' все еще требуется.

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

Вам следует рассмотреть возможность использования setInterval и массива изображений для изменения источника. Это заставит изображение постоянно зацикливаться

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

Вы можете использовать функцию setTimeout для вызова предопределенной функции, чтобы изменить ваши изображения следующим образом:

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

Убедитесь, что вы не звоните setTimeout(changeImage(), <time in milliseconds>); (обратите внимание на две скобки)

Этого следует избегать, и вы должны попытаться использовать функцию вместо строки, которая будет оцениваться как первый параметр для setTimeout ().

В качестве альтернативы, вы можете использовать анонимную функцию вместо создания changeImage.Пример.

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