js вращающийся таймер изображения

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

Ну, я не могу точно понять, что вы пытаетесь сделать, но .delay(), вероятно, то, что вы ищете. Он изменяет очередь анимации в jQuery без приостановки выполнения вашего кода, поэтому вы должны иметь возможность изменять другие параметры изображения, пока анимация еще не запущена.

Если вы также спрашиваете, как выполнить вращение (таким образом, который работает с .delay()), я рекомендую jquery-animate-css-rotate-scale . Посмотрите readme для получения подробных инструкций о том, как его использовать, но для того, что вы хотите сделать, нужно включить пару файлов JavaScript, а затем:

$('#image').delay(x).rotate(d);

с учетом x секунд задержки и d градусов. Конечно, вы можете делать более сложные вещи.

Edit:

Я просто понял, что вы, возможно, не хотели, чтобы это оживило. В этом случае вам просто нужно использовать другой патч того же автора, jquery-css-transform , выполняющий что-то вроде этого:

$('#image').delay(x).queue(function () {
  $('#image').css({transform: 'rotate(165deg)'});
});

Это заставляет jQuery применять преобразование css как анимацию, поэтому его можно отложить, но фактически ничего не анимировать.

Кроме того, на личном веб-сайте автора есть важное замечание, если вы полагаетесь на то, что jQuery возвращает свойства преобразования в качестве матрицы преобразования из шести значений. Его патчи возвращают это в функциональность до 1.4.3, чтобы вместо этого возвращать строку преобразования (например, 'rotate(90deg)'). Это относится как к анимированным, так и не анимированным решениям.

Редактировать 2:

Я только что увидел комментарий, что вы можете не захотеть физически поворачивать изображение, а просто периодически переключать изображения. Для этого просто используйте приведенный выше пример задержки, но замените внутреннюю функцию, которая заменяет ваше изображение так, как вы хотите, вместо преобразования css. Если это так, не обращайте внимания на этот плагин jQuery и на ограничения, которые я упомянул.