點擊幻燈片圖像給力只是一步

Question

<div id="divR"> 
<img class="imgT" src="imgT/01.jpg" alt="img"> 
<img class="imgT" src="imgT/02.jpg" alt="img"> 
<img class="imgT" src="imgT/03.jpg" alt="img"> 
<img class="imgT" src="imgT/04.jpg" alt="img"> 
<img class="imgT" src="imgT/05.jpg" alt="img"> 
</div> 

CSS

.imgT{ 
    position:absolute; 
    width:100%; 
    left:0; 
    top:0; 
    cursor:pointer; 
} 

所以我有一個簡單的幻燈片：

$(function(){ 
    $('#divR img:gt(0)').hide(); 
    setInterval(function(){ 
     $('#divR :first-child').fadeOut(1000) 
     .next('img').fadeIn(1000) 
     .end().appendTo('#divR');}, 
     5000); 
}); 

它的工作原理，但我需要通過點擊來強制執行這段代碼imgT，無需等待五秒鐘。

換句話說 - 如果沒有點擊幻燈片應該按原樣工作，但如果有一個點擊它應該只執行一個步驟，即改變下一個實際的圖片，然後等待下一個點擊，如果存在等等...

任何想法，請問？

Answer 1

我認爲這是你在找什麼

$(function(){ 
    $('#divR img:gt(0)').hide(); 

    function next() { 
     $('#divR :first-child').fadeOut(1000) 
      .next('img').fadeIn(1000) 
      .end().appendTo('#divR'); 
    }; 

    var interval; 
    function start() { 
     clearInterval(interval); 
     interval = setInterval(next, 5000); 
    }; 
    start(); 
    $('img').click(function() { 
     start(); 
     next(); 
    }); 
});