无法调整 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);
});