Question

我不知道javascript足以为此脚本添加点导航，但我确实需要使用此脚本。

有人可以在此脚本中添加点导航吗？

(function() {
    var quotes = $(".quotes");
    var quoteIndex = -1;
    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(600)
            .delay(4000)
            .fadeOut(600, showNextQuote);
    }
    showNextQuote();
})();

Answer 1

您可以将position: relative;提供给您的滑块容器和点容器position: absolute;，以便将点放在任何位置。

我有些点，等于.quotes的长度。它们只是跨越实际点并且具有class="dot"，正常点具有黑色而活动点具有白色。您可以使用图像，而活动图像具有不同的src。 .active已添加到相应的点并从之前删除。

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

for (var i = 0; i < quotes.length; i++)
    $('#dots').append($('<span/>').addClass('dot').text("."));

function showNextQuote() {
    ++quoteIndex;
    $('.dot.active').removeClass('active');
    $('.dot').eq(quoteIndex % quotes.length).addClass('active');
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(600)
        .delay(4000)
        .fadeOut(600, showNextQuote);
}
showNextQuote();

添加了一点CSS过渡以使转换顺利进行。

.dot {
    display: inline-block;
    font-size: 48px;
    font-weight: bold;
    color: black;
    margin-left: 10px;
    transition: color 600ms ease-in-out;
}
.dot.active {
    color: white;
}

jsfiddle DEMO

编辑：

要使点可点击，请给它们cursor: pointer;，使它们看起来可点击，然后给它们点击听众：

$('.dot').on('click', function() {
    $('.dot.active').removeClass('active');
    clicked = true;
    $(this).addClass('active');
    quoteIndex = $(this).index()-1;
    $('.quotes').hide();
    $('.quotes').eq($(this).index()).show();
});

Updated jsfiddle

为fadein滑块添加点

1 个答案: