jquery - 制作一个 jQuery 文本滑块

Question

所以基本上我有多个名为quote 的div 类，其中包含一个文本和一个blockquote。我怎样才能使它每 5 秒淡出到下一个报价类？

标记如下所示：

<div id="quoteWrapper">
<div class="quote">

    <blockquote>Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Second Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Third Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>
</div>

Answer 1

这里有一个类似的问题。我要做的是创建一个使用 jquery 淡出当前报价并在回调中淡出下一个的间隔。您可以通过添加一个类来确定当前显示的报价

<div class="quote visible">

    <blockquote>Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Second Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

然后

setInterval(showQuote, 5000);

...

function showQuote() {
    // get visible quote
    $('.quote.visible').fadeOut(function() {
        // remove visible class from old quote and add it to new
        // get next quote and fadeIn() when fadeout finishes
    });
}