Question

我在一个页面上有七个项目组合项目，其中只有一个有一个“特色”类，正如您可能猜到的那样，一个是焦点。它更大，有更多细节。

现在，我希望在每5秒后更改该类，以遍历所有项目组合项。让我们说吧。怎么办？请记住，我对JS不太好。还在学习，所以我很感激你对这个的帮助。

所以，回顾一下。我希望当访问者登录页面时，要更改要素组合项目，以便浏览所有项目。

我对使用vanilla JS ES6这样做感兴趣，所以没有jQuery。但是，如果你知道如何用jQuery完成它，可以自由发布它。

以下是个别项目的html示例。

<div class="portfolio-items">
                <!-- Portfolio item 1 -->
                <figure class="portfolio-item ">
                    <img src="img/portfolio-1.jpg" alt="portfolio-item">
                    <figcaption>
                        <h2 class="portfolio-title">Project Name</h2>
                        <p class="portfolio-desc">A short description could go right here</p>
                        <a href="#" class="portfolio-link">More info</a>
                    </figcaption>
                </figure>

类“精选”正被添加到数字标签中。

谢谢：）

Answer 1

您可以使用document.getElementsByClassName“收集”所有相关元素使用每个元素的css或classList.add方法添加或删除classList.remove类。

您应该跟踪添加类所需的索引（集合中的下一个元素）以及删除类所需的元素索引（集合中的前一个元素）。

至于时间迭代，您可以使用setInterval函数。

这是一个小型运行示例：

let currentIndex = 0;
const elements = document.getElementsByClassName('item');
setInterval(() => {
  const prevIndex = currentIndex === 0 ? elements.length - 1 : currentIndex - 1;
  const prevElement = elements[prevIndex];
  const nextElement = elements[currentIndex];
  prevElement && prevElement.classList.remove('active');
  nextElement && nextElement.classList.add('active');
  const nextIndex = currentIndex + 1;
  currentIndex = nextIndex === elements.length ? 0 : nextIndex
}, 1000);

.item {
  padding: 15px;
  margin: 0 5px;
}

.active {
  box-shadow: 0 0 1px 1px #333;
  background-color: green;
  color: #fff;
}

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

在加载页面时，通过div迭代类

1 个答案: