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導航幻燈片

回答

相關問題