0

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

3
  • Tipo um carrossel? Commented 19/04/2018 às 11:12
  • Se vc tiver um número específico de linhas(se for sempre o mesmo número de linhas) vc tb consegue fazer só com CSS sem precisar de JS fazendo apenas uma animação simples com CSS. Se te interessar posso fazer um exemplo e te responder.
    – hugocsl
    Commented 19/04/2018 às 11:42
  • com certeza quero. Commented 19/04/2018 às 12:11

2 Respostas 2

0

Carlos conforme solicitado no comentário segue uma opção fazendo apenas com CSS. Se vc quiser aumentar a duração da animação bastas aumentar o valor aqui animation-duration:4s deixei comentado no código

Veja o resultado:

ul li {
    opacity: 0;
    animation-duration: 4s; /* duração da animação */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    font-size: 2rem;
}
ul li:nth-child(1) {
    animation-name: teste1;
}
ul li:nth-child(2) {
    animation-name: teste2;
}
ul li:nth-child(3) {
    animation-name: teste3;
}
ul li:nth-child(4) {
    animation-name: teste4;
}

@keyframes teste1 {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
}
@keyframes teste2 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    55% {
        opacity: 0;
    }
}
@keyframes teste3 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    55% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
}
@keyframes teste4 {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li> 4 </li>
</ul>

OBS: A animação é sincronizada para funcionar com 4 LI em 4 intervalos de 4. Se vc quiser alterar isso vai ter que mexer nas porcentagens do @keyframes até "equalizar" direitinho.

0

Para fazer isso o mais apropriado é utilizar setInterval para dar a temporização que está à espera. Em cada intervalo de tempo chamado pelo setInterval, passa para o próximo elemento (voltando a 0 se estiver no ultimo) e troca as classes. Para remover e adicionar classes pode utilizar classList.

Exemplo:

const lis = document.querySelectorAll("li");
let corrente = 2; //corresponde ao terceiro li (posições começam em 0)

setInterval(() => {
    lis[corrente].classList.remove("ativa"); //remove a classe no elemento corrente
    corrente = (corrente + 1) % lis.length; //passa para o próximo
    lis[corrente].classList.add("ativa"); //adiciona a classe no novo
}, 500); //500 milisegundos entre cada chamada
li{
    opacity:0;
}
.ativa {
    opacity:1;
}
<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li class="ativa"> 3 </li>
  <li> 4 </li>
</ul>

Para adicionar uma classe utilizei classList.add e para remover classList.remove. No avanço para o próximo utilizei o operador % que acaba por fazer com que garantir que o elemento não passe do tamanho do array:

corrente = (corrente + 1) % lis.length;

Outra alternativa para isto seria:

corrente++;
if (corrente >= lis.length){
    corrente = 0;
}

Ou até com um ternário:

corrente = (corrente + 1 >= lis.length) ? 0 : corrente + 1;

Repare que eu escrevi manualmente a posição do elemento que começou ativo. Também consegue achar esse elemento dinamicamente utilizando por exemplo findIndex, que lhe dá a posição de determinado elemento:

let corrente = [...lis].findIndex(li => li.classList.contains("ativa"));
if (corrente == -1){ //se não existe 
    corrente = 0; //começa no primeiro
}

O teste feito dentro do findIndex verifica se o elemento tem a classe com classList.contains.

Edit:

Olhando para o seu código em JQuery, deve utilizar show e hide para mostrar e esconder os elementos respetivamente, pois é para esse fim que essas funções foram criadas. Se precisar de mostrar ou esconder de formas mais vistosas, tem varias variantes desde com slide, fade, etc...

Quanto ao avançar para o próximo elemento deve faze-lo à custa de next() e se vir que está num não valido volta ao primeiro, que obtem utilizando o pseudo seletor :first.

Assim:

$(document).ready(function(e) {
  var li = $(".cycle-slideshow div.atividades li.ativa");
  var first = $(".cycle-slideshow div.atividades ul li:first");
  li.show();
  
  function addcls() {  
    li.hide().removeClass("ativa");
    li = li.next();
    if (!li.length){ //se passou o ultimo
      li = first; //volta ao primeiro
    }
    li.show().addClass("ativa");
  };

   setInterval(addcls, 500);  
});
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 {
    color:lightBlue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cycle-slideshow">
  <div class="atividades">
    <ul>
      <li> 1 </li>
      <li> 2 </li>
      <li class="ativa"> 3 </li>
      <li> 4 </li>
    </ul>
  </div>
</div>

Deixei a classe ativa na mesma mas sem o display:block pois isso já é feito no show. Agora só deve colocar outros estilos visuais que façam sentido para o elemento que está ativo.

12
  • então, esse: let corrente = 2;. deu erro no chrome. E essa linha também deu erro setInterval(() => { Commented 19/04/2018 às 11:39
  • @CarlosRocha Qual o erro que deu ?
    – Isac
    Commented 19/04/2018 às 11:42
  • então, erro não dá, porém só não roda Commented 19/04/2018 às 12:25
  • Tem o código colocado em que local da página ? Confirme que ele é executado depois de a pagina ser carregada, caso contrário não irá funcionar (assim como grande parte dos scripts). Pode fazer isso com window.onload ou $(document).ready caso esteja a utilizar JQuery. Depois veja o que aparece inspecionar do navegador, tanto a nível de avisos como erros.
    – Isac
    Commented 19/04/2018 às 12:46
  • reveja o final a minha pergunta por favor. Adicionei detalhes. E sim, estou usando $(document).ready Commented 19/04/2018 às 12:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .