顯示多張圖像，通過它們旋轉的jQuery

Question

我有一個主div容器，如：

<div id="ourCustomers" style="height:300px;float:right;width:480px;"> 
     <div id="topOurCust" style="height:150px;width:480px;"> 
      <div id="topLeftCust" style="height:150px;width:240px;float:left;"> 
       <img id="tl1" src="/images/1.png" /> 
       <img id="tl2" src="/images/2.png" /> 
      </div> 
      <div id="topRightCust" style="height:150px;width:240px;float:right;"> 
       <img class="one" src="/images/3.png" /> 
       <img class="two" src="/images/4.png" /> 
      </div> 
     </div> 
     <div id="btmOurCust" style="height:150px;width:480px;"> 
      <div id="btmLeftCust" style="height:150px;width:240px;float:left;"> 
       <img class="one" src="/images/5.png" /> 
       <img class="two" src="/images/6.png" /> 
      </div> 
      <div id="btmRightCust" style="height:150px;width:240px;float:right;"> 
       <img class="one" src="/images/7.png" /> 
       <img class="two" src="/images/8.png" />      
      </div> 
     </div> 
</div> 

我想要做的就是在每平方顯示一個圖像，然後與轉出左上角圖像在該div中的其他圖像，等待4秒，然後用該div中的其他圖像（和其他div一樣）將右上圖像翻轉出來。

我試過使用jQuery切換方法和延遲（對不起，我沒有代碼方便，在其他系統上），但是發生了什麼事是我顯示兩個圖像，看着他們都隱藏，然後看他們都顯示。另外，我必須爲每個圖像編寫邏輯，並且我確信有一種方法可以更輕鬆地完成此操作。

我是否需要使用Javascript計時器方法？我可以像以前一樣使用jQuery切換嗎？

Answer 1

我會建議使用jQuery週期插件：

http://jquery.malsup.com/cycle/

然後，你可以實例化週期插件是這樣的：

$('#topLeftCust').cycle({ 
    delay: 0, 
    timeout: 16000 
}); 

$('#topRightCust').cycle({ 
    delay: 4000, 
    timeout: 16000 
}); 

$('#btmLeftCust').cycle({ 
    delay: 8000, 
    timeout: 16000 
}); 

$('#btmRightCust').cycle({ 
    delay: 12000, 
    timeout: 16000 
});