jquery - 制作一个 jQuery 文本 slider

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

有个类似的问题here .我要做的是创建一个使用 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
    });
}