Question

我有以下文字＆＃39; slider＆＃39; （jsFiddle）我想添加next / prev按钮，我不知道从哪里开始..

我尝试将showNextQuote();绑定到点击功能，但它做的是同时显示两个引号。

<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>

脚本：

(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();

PS：我也尝试过：

    $('#next').on('click', getNext);
    $('#prev').on('click', getPrev);

function getNext() {
    var $curr = $('.quotes:visible'),
        $next = ($curr.next().length) ? $curr.next() : $('.quotes').first();

    transition($curr, $next);
}

function getPrev() {
    var $curr = $('.quotes:visible'),
        $next = ($curr.prev().length) ? $curr.prev() : $('.quotes').last();
    transition($curr, $next);
}

Answer 1

我建议在运行新动画并将1或-1传递给函数之前使用.stop()来停止当前动画：

Fiddle

HTML：

<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>
<h2 class="quotes">third quote</h2>
<input id="prev" type="button" value="Prev" />
<input id="next" type="button" value="Next" />

JS：

$(function()
{
    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showQuote(change)
    {
        quoteIndex += change;
        if (quoteIndex < 0)
        {
            quoteIndex += quotes.length;
        }
        else if (quoteIndex >= quotes.length)
        {
            quoteIndex -= quotes.length;
        }
        quotes.stop(true, true).hide().eq(quoteIndex)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000)
            .queue(function() { showQuote(1); });
    }  
    showQuote(1);

    $('#prev').on('click', function()
    {
        showQuote(-1);
    });

    $('#next').on('click', function()
    {
        showQuote(1);
    });
});

将next / prev按钮添加到文本＆＃39;滑块＆＃39;

1 个答案: