Então, tenho uma ul
com suas li's
.
Gostaria de fazer um js
de forma que cada li
aparecesse e sumisse (automaticamente em um ciclo infinito) para dar lugar à próxima li
. Isto é, que cada li
aparece em sequência.
algo do Tipo:
HTML
<ul>
<li> 1 </li>
<li> 2 </li>
<li class="ativa"> 3 </li>
<li> 4 </li>
</ul>
...
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li class="ativa"> 4 </li>
</ul>
CSS:
li{
opacity:0;
}
.ativa {
opacity:1;
}
Alguma dica? Obrigado a quem pudesse ajudar!
Add:
Então, fiz esse jQuery
$(document).ready(function(e) {
function addcls() {
var li = $(".cycle-slideshow div.atividades ul li.ativa");
li.removeClass('ativa');
var current = li.removeClass('ativa');
next = current.next().length ? current.next() : current.siblings().filter(':first');
next.addClass('ativa');
};
setInterval(function () {
addcls();
}, 2000);
});
E o css, assim:
div.atividades ul li{
display:none;
vertical-align:middle;
line-height:100px;
position:absolute;
border:.1px #000 solid;
width:100%;
text-align:center;
font-size:36px;
}
.ativa {
display:block;
}
O que está dando erro é que, quando eu faço:
div.atividades ul li{
display:none;
todas as lís somem: obviamente. Porém, quando faço
next.addClass('ativa');
Embora no espectro as lis
estejam ganhando e perdendo a classe ativa
normalmente pelo javascript, o display: block
não ocorre