setInterval在不使用jquery的情况下逐个更改javascript中元素集的样式

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

是的,你需要在一段时间内添加和删除一个类

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>