jQuery 导航幻灯片

Question

我有一个工作正常的 div 滑块，但我想要一个指示当前活动幻灯片的导航，如果您单击 link，它会显示您单击的幻灯片。我的问题是，每当我从导航中单击 link 时，我的页面就会变得没有响应，我需要关闭选项卡并重新打开 website.I 在许多浏览器中尝试过它，它做同样的事情。当我在单击 event.Can 时添加 "navSlides" 时出现问题有人向我解释我需要做什么才能使其正常工作？谢谢！

这是我的JSFIDDLE

 contentSlides = $('.slide-wrapper');
    navSlides = $('#slide-nav > ul > li > a');
    slidesLeng = contentSlides.length - 1;
    index = 0;

    for (i = 0; i <= slidesLeng; i++) {
        $(contentSlides[i]).addClass('slide-' + i);
        $(navSlides[i]).addClass('slide-' + i);
    }    

    $('div.slide-wrapper > span').on('mouseover', function () {
        $(this).css({ 'font-size': '40px' });
    });

    $('div.slide-wrapper > span').on('mouseout', function () {
        $(this).css({ 'font-size': '50px' });
    });


    $('.next').on('click', function () {
        if (index != slidesLeng) {
            $(contentSlides[index]).fadeOut(400, function () {
                $(this).removeClass('active');
                $(navSlides[index]).removeClass('active');
                index++;
                $(contentSlides[index]).fadeIn(400).addClass('active');
                $(navSlides[index]).addClass('active');
            });
        }
    });

    $('.prev').on('click', function () {
        if (index != 0) {
            $(contentSlides[index]).fadeOut(400, function () {
                $(this).removeClass('active');
                $(navSlides[index]).removeClass('active');
                index--;
                $(contentSlides[index]).fadeIn(400).addClass('active');
                $(navSlides[index]).addClass('active');
            });
        }
    });

    $(navSlides).on('click', function () {
        var slideClass = $(this).attr('class');

        $(contentSlides[index]).fadeOut(400, function () {
            $(this).removeClass('active'); 
            index = 0;
            while (slideClass != $(contentSlides[index]).attr('class') || index<=slidesLeng) {
                index++;
            }
            contentSlides[index].fadeIn(400).addClass('active');
        });    
    });

Answer 1

问题是点击处理程序中的 while 循环永远不会退出。表达式 slideClass != $(contentSlides[index]).attr('class') || index<=slidesLeng 始终为真，因为比较是在每个元素的 class 属性之间进行的。这些不会相同，因为内容幻灯片有额外的 class，例如 slide-wrapper。

因此，第一张幻灯片的 class 属性将是 "slide-wrapper active slide-0"，但第一张幻灯片的 class 属性 link将只是 "slide-0".

这可以通过使用 jQuery index function to get the index of the element instead of trying to match the classes. A working version of the click handler is as follows. An updated, working version of the JSFiddle is here: http://jsfiddle.net/kbkkg4ev/ 来补救。

$(navSlides).on('click', function () {
    var slideIndex = navSlides.index(this);

    $(navSlides).removeClass('active')
    $(this).addClass('active');

    $(contentSlides[index]).fadeOut(400, function () {
        index = slideIndex;
        $(this).removeClass('active');
        $(contentSlides[index]).fadeIn(400).addClass('active');
    });
});

jQuery 导航幻灯片

jQuery navigation slides

html

javascript

navigation

jquery

slider