Jquery/Javascript循環div滾動條

Question

我試圖讓5個div永久循環進出。 div將有類「text1」，「text2」，「text3」等等。這段代碼有什麼問題嗎？它似乎沒有工作。

$(document).ready(function(){ 
    var num = 1 
    while(num =< 5) { 
     $('.text' + num).fadeIn().delay(4000).fadeOut() 
     var num = num ++i 

     if(num == 5) { 
      var num = 1 
     } 
     else{ 
      var num = num 
     } 
    } 
}); 

Answer 1

充分利用回調函數的fadeOut方法中：

$(document).ready(function() { 
    function fader(i) { 
     $('div.text' + i).fadeIn('slow') 
      .delay(4000).fadeOut('slow', function() { 
       fader(i % 5 + 1); 
      }); 
    } 

    fader(1); 
}); 

http://jsfiddle.net/mblase75/NXuVM/2/

Answer 2

這將無限循環。 .delay不會暫停執行，它只是設置一個稍後調用的函數。你的代碼設置爲fadeOut被稱爲無限次，4秒後。

你想setInterval代替：

<div class="textContainer"> 
    <div>Text 1</div> 
    <div>Text 2</div> 
    <div>Text 3</div> 
    <div>Text 4</div> 
    <div>Text 5</div> 
</div> 

$(document).ready(function() { 
    var i = 0; 
    var divs = $('.textContainer div'); 
    setInterval(function() { 
     divs.eq(i).fadeOut(); 
     i = (i + 1) % divs.length; 
     divs.eq(i).fadeIn(); 
    }, 4000); 
});