Здравствуйте, делаю что-то на подобии карусели на сайт, только вместо прокручивания, блоки карусели должны медленно исчезать, а на их месте должны появляться другие. У меня уже есть идея, как это можно сделать, только не получается написать правильный код.
Итак, сама идея. Как только проходит определенный промежуток времени, сразу к элементу карусели (div.slide) должен добавляться класс active. По умолчанию прозрачность всех элементов будет равна нулю. А если к нему был добавлен класс active, то мы меняем прозрачность на 1. (Кстати, думал сделать не с прозрачностью, а с visibility иди display, какие у вас мысли по этому поводу).
Собственно, попытался организовать это следующим скриптом.
$(document).ready(function() {
$numSlides = $("div.mgr div.slide").length;
$slide = $("div.mgr div.slide");
for (var i = 1; i <= $numSlides; i++) {
setTimeout(function() {
$("div.mgr div.slide." + i).addClass("active");
}, 5000);
}
});
Но он, почему-то, по истечении 5 секунд, тупо добавляет класс только последнему элементу.
HTML на всякий случай
<div class="mgr">
<div class="slide 1">Первый слайд</div>
<div class="slide 2">Второй слайд</div>
<div class="slide 3">Третий слайд</div>
<div class="slide 4">Четвертый слайд</div>
<div class="slide 5">Пятый слайд</div>
</div>
Помогите грамотно организовать код, пожалуйста!
