3 秒后自动播放悬停

Question

我有 5 个句子，我想在 3 秒后对下一个句子的背景进行着色

HTML:

    <div class="text-slider">
        <div class="text-wrap">
            <p class="text text-1 active"> text 1</p>
            <p class="text text-2">text 2</p>
            <p class=" text text-3">text 3</p>
            <p class="text text-4">text 4</p>
            <p class="text text-5"> text 5 </p>
        </div>
    </div>

CSS:

.text-wrap p.active {
  background-color: #edf0f2;
}

JS

let count = 1
setInterval(()=>{

    document.querySelector(`.text-${count}`).classList.add('active')
    count++
   
    if(count>5){
        count =1
    }
}, 3000)

我想从上一个元素中删除 class active 所以我尝试

 document.querySelector(`.text-${count -1}`).classList.remove('active')

经过 count++ 但它不起作用

Answer 1

您可以稍微修改一下，然后在您的选择器中找到活动元素并从中删除活动 class，如下所示。

let count = 1;
setInterval(() => {
  // Here you remove active class from `p` tag which had it
  document.querySelector(".text.active").classList.remove("active"); // <- HERE
  
  document.querySelector(`.text-${count}`).classList.add("active");
  count++;

  if (count > 5) {
    count = 1;
  }
}, 3000);

片段

let count = 1;
setInterval(() => {
  document.querySelector(".text.active").classList.remove("active");
  document.querySelector(`.text-${count}`).classList.add("active");
  count++;

  if (count > 5) {
    count = 1;
  }
}, 1000);

.text-wrap p.active {
  background-color: #edf0f2;
}

<div class="text-slider">
    <div class="text-wrap">
      <p class="text text-1 active">text 1</p>
      <p class="text text-2">text 2</p>
      <p class="text text-3">text 3</p>
      <p class="text text-4">text 4</p>
      <p class="text text-5">text 5</p>
    </div>
</div>

Answer 2

我稍微重构了 JavaScript 文件：

let count = 1
setInterval(() => {
  if (count > 5) {
    document.querySelector(`.text-${count- 1}`).classList.remove('active')
    count = 1
  } else {
    document.querySelector(`.text-${count}`).classList.add('active')
    if (count > 1) document.querySelector(`.text-${count-1}`).classList.remove('active')
    count++
  }
}, 1000)

.text-wrap p.active {
  background-color: #edf0f2;
}

    <div class="text-slider">
      <div class="text-wrap">
        <p class="text text-1 active"> text 1</p>
        <p class="text text-2">text 2</p>
        <p class=" text text-3">text 3</p>
        <p class="text text-4">text 4</p>
        <p class="text text-5"> text 5 </p>
      </div>
    </div>

Answer 3

你需要使用remove而不是add来删除class，我试着稍微调整一下你的js代码。

let count = 1;
setInterval((storage) => {
  const clsName = 'active';
  const current = `.text-${count}`;
  const previous = storage.shift();
  document.querySelector(previous)?.classList.remove(clsName);
  document.querySelector(current).classList.add(clsName);
  storage.push(current);
  count = count % 5;
  count++;
}, 1000, [])

.text-wrap p.active {
  background-color: #edf0f2;
}

<div class="text-slider">
  <div class="text-wrap">
    <p class="text text-1 active"> text 1</p>
    <p class="text text-2">text 2</p>
    <p class="text text-3">text 3</p>
    <p class="text text-4">text 4</p>
    <p class="text text-5"> text 5 </p>
  </div>
</div>

3 秒后自动播放悬停

autoplay hover after 3 second

javascript

css

autoplay

片段