不能調整Javascript報價轉動首次報價加載時間的第一個報價

Question

我有一個簡單的報價轉子問題。引號之間的時間是完美的，我可以調整。不過，我需要分別調整第一個報價的初始加載時間。它與其餘引號的計時器相同，並且初始引號需要在頁面加載時填充。我不確定要添加到這個Javascript代碼來完成。

<script type="text/javascript"> 
$(document).ready(function(){ 
var $quotes = $(".quote").hide(), 
    timer = 3000, 
    interval; 

var quoteRotate = function(){ 
    $quotes.filter(".current").fadeIn(timer, function(){ 
     var $this = $(this); 
     var $next = ($(this).next().length > 0) ? $this.next() : $quotes.first(); 
     $this.fadeOut(timer, function(){ 
      $this.removeClass('current'); 
      $next.addClass('current'); 
     }); 
    }); 
}; 

interval = setInterval(quoteRotate, timer * 2.05); 
}); 
</script> 

Answer 1

可以這樣設置初始延遲：

$(document).ready(function(){ 
 
    var $quotes = $(".quote").hide(), 
 
     timer = 3000, 
 
     initialDelay = 0, //adjust initial delay as needed 
 
     interval; 
 
    
 
    var quoteRotate = function(){ 
 
     $quotes.filter(".current").fadeIn(timer, function(){ 
 
      var $this = $(this); 
 
      var $next = ($(this).next().length > 0) ? $this.next() : $quotes.first(); 
 
      $this.fadeOut(timer, function(){ 
 
       $this.removeClass('current'); 
 
       $next.addClass('current'); 
 
      }); 
 
     }); 
 
    }; 
 
    
 
    setTimeout(function() { 
 
     quoteRotate(); 
 
     interval = setInterval(quoteRotate, timer * 2.05); 
 
    }, initialDelay); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="quote current">"This is a quote" -somebody</div> 
 
<div class="quote">"This is another quote" -somebody</div> 
 
<div class="quote">"This is yet another quote" -somebody</div> 
 
<div class="quote">"This is the fourth quote" -somebody</div> 
 
<div class="quote">"This is the fifth quote" -somebody</div> 
 
<div class="quote">"This is the sixth quote" -somebody</div> 
 
<div class="quote">"This is the seventh quote" -somebody</div> 
 
<div class="quote">"This is the 8th quote" -somebody</div>

我已經設定，在這裏零，因爲它似乎那是你可能想要的東西，但顯然你可以調整它以適應。當然，如果這就是你想要的，只需在設置時間間隔前加上quoteRotate()即可：

$(document).ready(function(){ 
var $quotes = $(".quote").hide(), 
    timer = 3000, 
    interval; 

var quoteRotate = function(){ 
    $quotes.filter(".current").fadeIn(timer, function(){ 
     var $this = $(this); 
     var $next = ($(this).next().length > 0) ? $this.next() : $quotes.first(); 
     $this.fadeOut(timer, function(){ 
      $this.removeClass('current'); 
      $next.addClass('current'); 
     }); 
    }); 
}; 

quoteRotate(); //Show the first quote immediately. 
interval = setInterval(quoteRotate, timer * 2.05); 
});