Проблема с setInterval и clearInterval
Добрый день! Делаю слайдер с переключателями по слайдам и автопереключением. Отдельно они работают нормально, но вместе плохо дружат. Автопереключение при помощи 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); }); }); }); |
kat-khmara,
Если перезапуск с удалением - смысла ставить setInterval нет и данные функции работают нормально и без проблем через анонимную функцию, либо через текстовую переменную либо setInterval("SliderAuto()",5000); либо setInterval(function(){SliderAuto()},5000); Потом - самое простое для автопереключения просто делать клик по кнопе setInterval(function(){$('.slider_switch ul li.right).click()},5000); тады сильных конструкций для автопрокрутки мон не делать, (ток флаг ставим - ручная или авто, дабы выходить из авто при кликом мышью |
Спасибо за идею, попробую упростить. Но проблема именно в том, что автопереключение срабатывает через 5 секунд и это время не обнуляется при клике на кнопку. В какой бы момент пользователь не нажал переключатель, setInterval все равно переключит слайд на 5-ой секунде. Я хотела сделать так, чтобы при клике на кнопку отсчет секунд начинался с нуля.
|
kat-khmara,
у вас проблема что слайдер по истечении 5 секунд переходит на новый, но и пользователь тоже может кликнуть и переключить:) ? я тоже сталкивался с данной проблемой а она решается так: <script> document.ok = 1; function alPr(){ if (document.ok == 10) document.ok = 0; if (document.ok != 1){document.ok++; return} if (document.i == 4){setTimeout('al()', 1000)} document.ok++; } function al(prov){ s = document.createElement('span'); s.innerHTML = 'LOL<br>'; document.getElementById('div').appendChild(s); document.i = 0; } document.i = 0; function text(){ if (document.i == 5) document.i = 0; document.getElementById('text').innerHTML = document.i; document.i++; } setInterval('text()', 1000); setInterval('alPr()', 100); </script> <span id='text'></span> <script> text(); </script> <div id='div'></div> <input type='button' value='Кнопка' onclick='al("but")'> |
Спасибо! Я тоже пыталась использовать setTimeout при клике, но как-то у меня не получалось. Буду пробовать.
|
kat-khmara,
незачто специально сделаю разбор кода - суть в том что есть счетчик (в данном случае это document.i) увеличивающийся каждую секунду на единицу, кол-во проверок на секунду (в данном случае document.ok, естственно так как 100мс 10 в 1 секунде то и if (document.ok == 10) document.ok = 0;), и проверка на значение счетчика (if (document.i == 4){setTimeout('al()', 1000)}) |
Часовой пояс GMT +3, время: 12:54. |