javascript - 带导航的简单 jquery 幻灯片？

Question

所以我正在为我的类(class)创建一个非常简单的 jQuery/CSS 幻灯片。它大约有 10 页长，如果您只想按该顺序从头到尾浏览，现在它工作正常，但如果您出于任何原因需要刷新页面，它会将您送回第一页。因为它在较长的一端，我希望能够“点击”到某个页面......这可能不会太复杂吗？

这是我的 jQuery

function checkNav() {
    if ($('.active-slide').hasClass('first')) {
        $('.prev').hide();
        $('.next').show();
    } else if ($('.active-slide').hasClass('last')) {
        $('.next').hide();
        $('.prev').show();
    } else {
        $('.next').show();
        $('.prev').show();
    }
}
var main = function() {
    checkNav();

    $('.next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next('.slide');

        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();

        //if nextslide is last slide, go back to the first
        if (nextSlide.length === 0) {
            nextSlide = $('.slide').first();
            nextDot = $('.dot').first();

        }

        currentSlide.fadeOut(500).removeClass('active-slide');
        nextSlide.fadeIn(1100).addClass('active-slide');

        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');

        checkNav();
    });

    //prev slide function
    $('.prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev('.slide');
        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();

        //if prevslide is last slide, go back to the first
        if (prevSlide.length === 0) {
            prevSlide = $('.slide').last();
            prevDot = $('.dot').last();
        }

        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');

        checkNav();
    });
};

$(document).ready(main);

这是 HTML 的粗略标记

<div class="slide active-slide first">
    <div class="content">
        <p>First Slide</p>
    </div>
</div>
<div class="slide">
    <div class="content">
        <p>second slide</p>
    </div>
</div>
<div class="slide last">
    <div class="content">
        <p>third slide</p>
    </div>
</div>
<div class="slider-nav">
    <div class="prev">prev</div>
    <ul class="dots">
            <li class="dot active-dot">&bull;</li>
            <li class="dot">&bull;</li>
            <li class="dot">&bull;</li>
    </ul>
    <div class="next">next</div>
</div>

这是 jsFiddle ...我希望能够单击其中一个元素符号并转到相应的幻灯片....

Answer 1

$('ul.dots li').click(function(){
    var num = $(this).index();
    var currentSlide = $('.active-slide');
    var nextSlide = $('.slide:eq('+num+')');
    var currentDot = $('.active-dot');
    var nextDot = $(this);

    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

    checkNav();

});