Добрый день! Делаю слайдер с переключателями по слайдам и автопереключением. Отдельно они работают нормально, но вместе плохо дружат. Автопереключение при помощи setInterval по 5 сек. Но если юзер кликнет на переключатель через 4 сек, то на 5-ой сек слайдер снова сменяется. Пробовала на клике остановить setInterval через clearInterval и запустить его снова, но это не исправило ситуацию. Сделала массив айдишек setInterval'а и при клике останавливаю i-тый, запускаю i+1-вый. Подскажите, пожалуйста, уровень невежества при данном подходе. Возможно, существует стандартное решение, а я изобретаю велосипед?
$(function(){
function MainSlider(p){
$('.slider_switch ul li').removeClass('active');
$('.slider_switch ul li').eq(p).addClass('active');
$('.slider_photo .slider_photo_item').fadeOut(0);
$('.slider_photo .slider_photo_item').eq(p).fadeIn(800);
$('.slider_right_items .slider_right_item').fadeOut(0);
$('.slider_right_items .slider_right_item').eq(p).fadeIn(10);
}
function SliderAuto (){
var c;
var c2;
var b = $('.slider_switch ul li').size();
for(i=0;i<b-1;i++) {
if($('.slider_switch ul li').eq(i).hasClass('active')) {
c = i;
c2 = c+1;
}
}
if ($('.slider_switch ul li').eq(b-1).hasClass('active')) {
c = b-1;
c2 = 0;
}
MainSlider(c2);
}
$(document).ready(function(){
$('.slider_photo').css('height', '330px').css('overflow','hidden');
var i;
i=0;
var SliderInterval = new Array;
SliderInterval[i] = setInterval(SliderAuto,5000);
$('.slider_switch ul li').click(function(){
var n = $(this).index();
MainSlider(n);
clearInterval(SliderInterval[i]);
i=i+1;
SliderInterval[i] = setInterval(SliderAuto,5000);
});
});
});