JS如何使列表项幻灯片

JS可以通过一些技术实现列表项的幻灯片效果。以下是一种常见的实现方法：

使用HTML和CSS创建列表项的基本结构和样式。

<div class="slider">
  <ul class="slider-list">
    <li class="slider-item">Item 1</li>
    <li class="slider-item">Item 2</li>
    <li class="slider-item">Item 3</li>
    <li class="slider-item">Item 4</li>
  </ul>
</div>

.slider {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.slider-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 1200px; /* 列表项总宽度为每个项的宽度之和 */
  animation: slide 10s infinite; /* 使用CSS动画实现幻灯片效果 */
}

.slider-item {
  float: left;
  width: 300px; /* 每个列表项的宽度 */
}

@keyframes slide {
  0% { transform: translateX(0); }
  25% { transform: translateX(-300px); }
  50% { transform: translateX(-600px); }
  75% { transform: translateX(-900px); }
  100% { transform: translateX(0); }
}

使用JavaScript获取列表项的父元素和列表项的宽度，并计算列表项总宽度。

const slider = document.querySelector('.slider');
const sliderList = document.querySelector('.slider-list');
const sliderItems = document.querySelectorAll('.slider-item');
const itemWidth = sliderItems[0].offsetWidth;
const totalWidth = itemWidth * sliderItems.length;
sliderList.style.width = totalWidth + 'px';