Пытаюсь написать простенькую карусель на 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;
с ним в страницу прописываются ненужные цифры, без него работает криво.
Решение: toster.ru/q/61934