Tengo esta pieza de código donde tomo datos de JSON y los pongo en cuatro secciones.
Teniendo esas cuatro secciones, quiero agregar un borde a una sección durante 2 segundos, luego eliminar y agregar el borde a otra sección. Y así. Una vez que el borde está en la última sección, todo el proceso debe comenzar de nuevo.
Por lo que leí en hilos similares, debería usar setInterval y agregar/eliminar clases a cada elemento a través de bucles, pero no estoy seguro de cómo escribirlo. ¿Alguien podría ayudar?
function completeAd(obj) { const offers = obj['offers']; for (let i = 0; i < 4; i++) { let rand = Math.floor((Math.random() * offers.length)); const singleAd = document.createElement('section'); singleAd.className = "adSection" const price = document.createElement('p'); const imgURL = document.createElement('img') imgURL.src = "http:" + offers[rand].imgURL price.textContent = offers[rand].price + " " + offers[rand].currency; singleAd.appendChild(price); singleAd.appendChild(imgURL); adSection.appendChild(singleAd); } }Sí, necesita agregar y eliminar una clase en un intervalo
https://jsfiddle.net/mplungjan/pt68Lqoe/
const obj = { offers : [ { price:200, currency:"$", imgURL: "https://picsum.photos/200/200" }, { price:300, currency:"$", imgURL: "https://picsum.photos/300/200" }, { price:400, currency:"$", imgURL: "https://picsum.photos/400/200" }, { price:500, currency:"$", imgURL: "https://picsum.photos/500/200" }, { price:600, currency:"$", imgURL: "https://picsum.photos/600/200" } ]} const fy = (a, b, c, d) => { c = a.length; while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d}; // shuffle fy(obj.offers); // shuffle them window.addEventListener("load", () => { document.getElementById("adSections").innerHTML = obj.offers.slice(0, 4) // take the first 4 .map(offer => `<section class="adSection"><p>${offer.price}${offer.currency}</p><img src="${offer.imgURL}" />`).join(''); const sections = document.querySelectorAll(".adSection"); let cnt = sections.length - 1; setInterval(function() { sections[cnt].classList.remove("active"); cnt++; if (cnt >= sections.length) cnt = 0; sections[cnt].classList.add("active") }, 3000) }) section { display: block; border: 1px solid white; width: 500px } .active { border: 1px solid black } img { height: 200px } <div id="adSections"> </div>