Как победить проблему с самописной каруселью на jQuery? (update)?

Сильно модифицировав свой предыдущий вариант кода toster.ru/q/61624 (спасибо чуваку что откликнулся по скайпу и очень сильно помог), получил следующий результат.
HTML (без изменений)
<div class="review">
    <div class="review-tabs">
        <ul>
            <li id="review-block-1">1</li>
            <li id="review-block-2">2</li>
            <li id="review-block-3">3</li>
            <li id="review-block-4">4</li>
        </ul>
    </div>
    <div class="review-block review-block-1">review-block-1</div>
    <div class="review-block review-block-2">review-block-2</div>
    <div class="review-block review-block-3">review-block-3</div>
    <div class="review-block review-block-4">review-block-4</div>
</div>

CSS (без изменений)
.review-tabs li {
    cursor: pointer;
}
.review-tabs li:hover, .review-tabs li.active {
    font-weight: bold;
}
.review-block {
    display: none;
}
.review-block-1 {
    display: block;
}

JS
$(document).ready(function() {

	var hover = false;

	$(".review").hover(function(){
		hover = true;
	});
	
	$(".review").mouseleave(function(){
		hover = false;
		setTimeout(rotator, 3000);
	});
	
	function rotator () {
		if (hover == true) return;
		var a = $(".review-tabs li.active");
		if (a.length) {
			a = a.removeClass("active").next();
			if (a.length == 0) {
				a = $(".review-tabs li").first();
			}
			a = a.addClass("active");

		} else {
			a = $(".review-tabs li").first().addClass("active");
		}

		var reviewId = $(".review-tabs li.active").attr("id");
		$(".review-block").hide();
		$("."+reviewId).show();

		setTimeout(rotator, 3000);
	}

	rotator ();

	$(".review-tabs li").click(function(){
		$(".review-tabs li").removeClass("active");
		$(this).addClass("active");
		var reviewId = $(".review-tabs li.active").attr("id");
		$(".review-block").hide();
		$("."+reviewId).show();
	});
});


Все работает как часы, но существует небольшая и очень противная проблемка: если наводить на блок мышь и оставаться в нем продолжительное время (несколько секунд), то всё работает как надо, карусель останавливается, табы переключаются, при уводе мышки карусель снова автоматически прокручивается, но стоит провести над блоком чуть быстрее (просто быстро провести мышкой задев блок), то он начинает беситься и табы переключаются с разной скоростью.

Живой пример скрипта можно посмотреть на сайте tkd63.ru (правая колонка Наши призеры).
  • Вопрос задан
  • 2933 просмотра
Решения вопроса 1
trueClearThinker
@trueClearThinker
setTimeout возвращает идентифкатор таймера. Присвойте результат setTimeout переменной. По hover делайте clearTimeout.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@personaljs
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы