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

您可以像这样设置初始延迟：

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

我在这里将它设置为零，因为它看起来像你想要的那样，但显然你可以调整它以适应。当然，如果您想要的只是，只需在设置间隔之前添加对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);
});

无法调整Javascript引用旋转器初始报价第一次报价的加载时间

1 个答案: