<ul class="items">
<li>О сколько нам открытий чудных</li>
<li>Готовят просвещенья дух</li>
<li>И опыт, сын ошибок трудных,</li>
<li>И гений, парадоксов друг</li>
</ul>
ul > li {
display: none;
&.show {
display: flex;
justify-content: center;
padding: 2px;
background-color: whitesmoke;
}
}
View Compiled
let t = 0,
els = document.querySelectorAll('.items li'),
arr = (els);
const go = e => {
arr.forEach( (item, i) => {
item.classList.remove("show");
});
let id = setInterval( e => {
arr[t].classList.add("show");
if( t > 0 ) arr[t-1].classList.remove("show"); // по 1 строке
t++;
if(t == arr.length) {
clearInterval(id);
t = 0;
}
}, 2000);
}
//setInterval( go, 20000 );
let i = 1;
let timerId = setTimeout(function tick() {
console.log(i++);
timerId = setTimeout(tick, 1000);
}, 1000);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.