實現簡單的滑塊

Question

我想自動播放setInterval函數添加一個自動播放功能，默認情況下循環，以這個簡單的圖像旋轉木馬有字幕。我的第一個嘗試就是在dom準備好的時候添加點擊功能。這不起作用。 注意我仍然需要導航按鈕才能繼續工作。

jQuery的：

$(document).ready(function() { 
    $('.img-wrap .slideZ:gt(0)').hide(); 
    $('.nextbox').click(function() { 
     $('.captionZ').fadeIn(); 
     $('.img-wrap .slideZ:first-child').fadeOut("slow").next().fadeIn("slow").end().appendTo('.img-wrap'); 
    }); 
    $('.prevbox').click(function() { 
     $('.captionZ').fadeIn(); 
     $('.img-wrap .slideZ:first-child').fadeOut(); 
     $('.img-wrap .slideZ:last-child').prependTo('.img-wrap').fadeOut(); 
     $('.img-wrap .slideZ:first-child').fadeIn(); 
    }); 
    }); 

加價：

<div class="paginateyo"> 
      <div class="prevbox"> 
      <img src="images/prev_arrow.jpg" id="prv" alt="Previous"/> 
      <span class="prvp">previous</span> 
      </div> 
      /
      <div class="nextbox"> 
      <span class="nxtp">next</span> 
      <img src="images/next_arrow.jpg" id="nxt" alt="Next"/> 
      </div> 
     </div> 
     </div> 

     <div id="img-grp-wrap"> 
      <div class="img-wrap"> 
       <div class="slideZ"> 
       <img src="images/slide_image1.jpg" alt=""/> 
       <div class="captionZ">aaaaaaaaaaaaaa 
       </div> 
       </div> 
       <div class="slideZ"> 
       <img src="images/slide_image2.jpg" alt=""/> 
       <div class="captionZ">bbbbbbbbbbbbbb 
       </div> 
       </div> 
       <div class="slideZ"> 
       <img src="images/slide_image3.jpg" alt=""/> 
       <div class="captionZ">cccccccccccccccc 
       </div> 
       </div> 
       <div class="slideZ"> 
       <img src="images/slide_image4.jpg" alt=""/> 
       <div class="captionZ">dddddddddddddddd 
       </div> 
       </div> 
       <div class="slideZ"> 
       <img src="images/slide_image5.jpg" alt=""/> 
       <div class="captionZ">eeeeeeeeeeeeeeeeee 
       </div> 
       </div> 
       <div class="slideZ"> 
       <img src="images/slide_image6.jpg" alt=""/> 
       <div class="captionZ">fffffffffffffffff 
       </div> 
       </div> 
       <div class="slideZ"> 
       <img src="images/slide_image7.jpg" alt=""/> 
       <div class="captionZ">gggggggggggggggggg 
       </div> 
       </div> 
      </div> 

     </div> 

Answer 1

做這樣的事情：如果你想讓它移動到

function interval(){ 
    function(){ 
    $('.captionZ').fadeIn(); 
    $('.img-wrap .slideZ:first-child').fadeOut("slow").next().fadeIn("slow").end().appendTo('.img-wrap'); 
}  
var t = setInterval(interval) ; 

「下一個」即時消息年齡。根據你想要如何設置，你也可以這樣做，onclick通過刪除window.clearInterval(interval)然後創建一個新的間隔來重置setInterval()函數。