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

Пытаюсь написать простенькую карусель на jQuery. С javascript работаю не часто поэтому код индусский и работает криво.
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() {
    $(".review").hover(function(){
		$(".review-tabs li").click(function(){
			$(".review-tabs li").attr("class","");
			$(this).attr("class","active");
			var reviewId = $(".review-tabs li.active").attr("id");
			$(".review-block").hide();
			$("."+reviewId).show();
		});
	},
	function(){
		var i = 1;
		var reviewLength = $(".review-block").length;
		(function() {
			if (i <= reviewLength) {
				$(".review-tabs li").attr("class","");
				$("#review-block-"+i).attr("class","active");
				$(".review-block").hide();
				$(".review-block-"+i).show();
				if(i == reviewLength) {
					i = 1;
				}
				else {
					document.body.innerHTML += i;
					i++;
				};
				setTimeout(arguments.callee, 1000);
			}
		})();
	});
});

Рабочий материал jsfiddle.net/pCYcg

Смысл в чем: есть 4 блока с инфой и 4 кнопки которые их переключают между собой. Реализовать это было не сложно. Сложность появилась когда захотел прикрутить автопрокрутку + остановка прокрутки при наведении на блок. Тут то собственно и сложность. Всё до чего дошел на данным момент в коде выше. Просьба помочь реализовать, знаю что не сложно, но мой опыт не позволил продвинуться дальше.

p.s. кусок с циклом взял с гугла, вроде работает нормально, но не могу понять зачем нужен этот момент document.body.innerHTML += i; с ним в страницу прописываются ненужные цифры, без него работает криво.

Решение: Как победить проблему с самописной каруселью на jQuery? (update)
  • Вопрос задан
  • 2919 просмотров
Пригласить эксперта
Ответы на вопрос 2
aen
@aen
Keep calm and 'use strict';
Зачем нужно было писать свой велосипед, если у вас не хватает на это скиллов? В интернете можно найти достаточное количество подобных каруселей, которые позволяют реализовать вашу задачу. Например, jCarousel.

Id для табов и class для переключателей имеют одинаковые названия - это плохо.

Про код на js вообще молчу. Тихий ужас, как говорила моя школьная учительница.
Ответ написан
@personaljs
Перепиши заново
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы