jQuery导航幻灯片

我有一个可正常工作的div滑块，但我想要一个指示当前活动幻灯片的导航，并且如果您单击某个链接，它将显示您单击的幻灯片。我的问题是，每当我点击一个从导航的链接我的网页变得没有反应，我需要关闭该选项卡，并重新打开website.I在许多浏览器中试过，它也做同样的事情。当我在点击事件中添加“navSlides”时，出现了一些问题。有人可以向我解释我需要做些什么才能使其工作？谢谢！jQuery导航幻灯片

这里是我的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'); 
     });  
    });

来源

2015-09-19 Eduard Valentin

什么是“页面崩溃”？你在很多浏览器上测试过吗？请详细说明 – Aziz

该页面无响应，我需要关闭该选项卡并重新打开它。是的，我在所有浏览器中都尝试过，它也是这样做的。 –

的问题是，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'); 
    }); 
});

来源

2015-09-19 23:21:32

我想我今天学会了曼尼的事情！非常感谢你！ –

jQuery导航幻灯片

回答

相关问题