js旋轉圖像定時器

我該如何去添加一個計時器到這個js，這樣圖像會在'x'時間量之後自動改變。因爲它的變化是通過帶有'rel'屬性的'a href'來完成的，但是那個'rel'的函數仍然是必需的。js旋轉圖像定時器

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>

來源

2011-08-16 John

您正在HTML元素的'rel'屬性中存儲位置？你是否試圖以類似的方式存儲旋轉量？ –

我認爲他希望圖像週期性地從圖像文件夾中繪製（想想「旋轉」橫幅廣告）。請改變這個問題，因爲它是不明確的。 – James

好了，我不能確切地看到你想要做什麼，而是.delay()可能是你在做什麼尋找。它會修改jQuery中的動畫隊列，而不會暫停執行代碼，所以當動畫尚未運行時，您應該可以更改有關圖像的其他內容。

如果您也在問如何進行輪換（與.delay()配合使用），我建議您使用jquery-animate-css-rotate-scale。檢查出關於如何使用它的完整說明自述，但對你想做的事，這將會是包括幾個JavaScript文件的問題，然後：延遲

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

定x秒， d度。當然，你可以做更復雜的事情。

編輯：

我才意識到你可能沒有針對它的動畫。在這種情況下，你應該只使用同一作者的其他小片，jquery-css-transform做這樣的事情：

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

這使得jQuery的應用CSS變換像動畫，因此它可以被推遲，但沒有實際動畫什麼。

此外，在作者的個人網站上，如果依賴jQuery將變換屬性作爲六值轉換矩陣返回，那麼需要注意一點。他的補丁將它返回到1.4.3版之前的功能，以返回轉換字符串（例如'rotate(90deg)'）。這適用於動畫和非動畫解決方案。

編輯2：

我剛纔看見你可能不希望評論物理旋轉圖像，但只是週期性切換圖像。爲此，只需使用上面的延遲示例，但用一種內部函數替代您的圖像，而不是以您希望的方式替換css變換。如果是這種情況，請忽略jQuery插件和我提到的限制。

來源

2011-08-16 01:32:48

js旋轉圖像定時器

回答

相關問題