jQuery 导航幻灯片答案

【问题标题】：jQuery navigation slidesjQuery 导航幻灯片
【发布时间】：2015-09-19 22:33:05
【问题描述】：

我有一个工作正常的div 滑块，但我想要一个指示当前活动幻灯片的导航，如果您单击链接，它会显示您单击的幻灯片。我的问题是，每当我单击导航中的链接时，我的页面都会变得无响应，我需要关闭选项卡并重新打开网站。我在许多浏览器中尝试过，它做同样的事情。当我在点击事件上添加“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');
        });    
    });

【问题讨论】：

“页面崩溃”是什么意思？您是否在许多浏览器上进行了测试？请详细说明
页面变得无响应，我需要关闭选项卡并重新打开它。是的，我在所有浏览器中都试过了，它做同样的事情。

标签： javascript jquery html navigation slider

【解决方案1】：

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

所以，第一张幻灯片的类属性将是"slide-wrapper active slide-0"，但第一个链接的类属性将只是"slide-0"。

这可以通过使用jQuery index function 获取元素的索引而不是尝试匹配类来解决。点击处理程序的工作版本如下。 JSFiddle 的更新工作版本在这里：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');
    });
});

【讨论】：