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