Добавить «активный» класс для навигации слайд-шоу

Question

Я создал слайд-шоу, которое затухает изображения в промежутке с jQuery. Я создал область навигации внизу, которая, когда вы нажимаете на квадрат, показывает этот слайд. Мне нужна помощь.

Когда вы нажимаете на квадрат навигации, время отсчета отключается, пока оно не переходит к следующему естественному слайду.

Мне нужен текущий квадрат слайда, чтобы быть другого цвета. Я пытаюсь добавить класс к квадрату с идентификатором соответствия, но он не добавляет класс.

$("#slideshow1 > div:gt(0)").hide(); 

var newvar = setInterval(function() { 
    var currentslide = $('.current').attr('id'); 
    $('#slideshow1 > div:first') 
     .fadeOut(1000) 
     .next() 
     .addClass('current') 
     .fadeIn(1000) 
     .end() 
     .removeClass('current') 
    .appendTo('#slideshow1'); 
    $('.slider-nav').removeClass('active'); 
    $('.slider-nav[data-number=' + currentslide + ']').addClass('active'); 
}, 5000); 

$(".slider-nav").click(function(e){ 
    e.preventDefault(); 
    var currentID = $(this).attr('href'); 
    $('#slideshow1 > div:first').fadeOut(1000); 
    $('div'+currentID).fadeIn(1000).nextAll("div.slide").addBack().prependTo("#slideshow1"); 
    $('.slider-nav').removeClass('active'); 
    $('.slider-nav[data-number=' + currentID + ']').addClass('active'); 
    clearInterval(newvar); 
    newvar = setInterval(function() { 
     $('#slideshow1 > div:first') 
      .fadeOut(1000) 
      .next() 
      .addClass('current') 
      .fadeIn(1000) 
      .end() 
      .removeClass('current') 
     .appendTo('#slideshow1'); 
     $('.slider-nav').removeClass('active'); 
     $('.slider-nav[data-number=' + currentID + ']').addClass('active'); 
    }, 5000); 
}); 

Сайт, где это слайд-шоу: http://saratoga.mspaceap.com/

Answer 1

Ваша проблема здесь:

$('.slider-nav[id=' + currentID + ']').addClass('active'); 

Поскольку currentID является строкой, как #1, так как вы установили это три строки ранее быть:

var currentID = $(this).attr('href'); 

Чтобы исправить, изменить свой код:

$('.slider-nav[id=' + currentID.substr(1) + ']').addClass('active') 
    .siblings().removeClass('active'); // don't forget to do this 

---

Это сказало: ваши навигационные элементы и слайды не должны иметь идентичные идентификаторы. Идентификаторы всегда должны быть уникальными. Я вижу, что вы работаете с этим, используя .attr('id'), но это по-прежнему плохая практика. Используйте общий атрибут data- или идентификатор, например nav1.

Answer 2

Присвоить setInterval переменной, как это:

$("#slideshow1 > div:gt(0)").hide(); 

var interval = setInterval(function() { 
    var currentslide = $('.current').attr('id'); 

    $('#slideshow1 > div:first') 
     .fadeOut(1000) 
     .next() 
     .addClass('current') 
     .fadeIn(1000) 
     .end() 
     .removeClass('current') 
     .appendTo('#slideshow1'); 
    }, 5000); 
} 

Затем сделать использование clearInterval в обработчике щелчка, как это:

$(".slider-nav").click(function(e){ 
    e.preventDefault(); 
    var currentID = $(this).attr('href'); 
    $('#slideshow1 > div:first').fadeOut(1000); 
    $('div'+currentID).fadeIn(1000).nextAll("div.slide").addBack().prependTo("#slideshow1"); 
    $('.slider-nav[id=' + currentID + ']').addClass('active'); 
    clearInterval(interval); 
}); 

Таким образом, ваш интервал будет сбрасываться при нажатии.