js ul lis appearing a post a

Question

So I have a ul with their li's.

I’d like to make a js so that each li appeared and disappeared (automatically in an infinite cycle) to make way for the next li. That is, that each li appears in sequence.

something like:

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;
}

Any tips? Thanks to anyone who could help!

Add:

So I made this 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);  

});

And the css, like this:

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;
}

What’s going wrong is that when I do:

div.atividades ul li{
    display:none;

all lines disappear: obviously. But when I do

next.addClass('ativa');

Although in the spectrum as lis are winning and losing the classe ativa usually by javascript, the display: block does not occur

Answer 1

To do this the most appropriate is to use setInterval to give the timing you are waiting for. In each time interval called by setInterval, passes to the next element (going back to 0 if it is in the last) and changes the classes. To remove and add classes you can use classList.

Example:

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>

To add a class I used classList.add and to remove classList.remove. In advance to the next I used the operator % which ultimately makes sure the element does not pass the array size:

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

Another alternative to this would be:

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

Or even with a ternary:

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

Note that I manually wrote the position of the element that started active. You can also find this element dynamically using for example findIndex, which gives it the position of a certain element:

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

The test done inside the findIndex checks if the element has the class with classList.contains.

Edit:

Looking at your code in Jquery, you should use show and hide to show and hide the elements respectively, as that is the purpose for which those functions were created. If you need to show or hide in more showy ways, it has several variants from slide, fade, etc...

As for moving on to the next element, it should do so at the expense of next() and if it sees that it is in an invalid back to the first, which it obtains using the pseudo selector :first.

Thus:

$(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>

I left the class ativa same but without the display:block because it is already done in the show. Now you should only put other visual styles that make sense to the active element.

Answer 2

Carlos as requested in the comment follows an option doing only with CSS. If you want to increase the duration of the animation just increase the value here animation-duration:4s left commented in the code

See the result:

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: The animation is synchronized to work with 4 LI in 4 intervals of 4. If you want to change this you will have to change the percentages of the @keyframes until "equalize" is right.