Сильно модифицировав свой предыдущий вариант кода
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 (правая колонка Наши призеры).