当前位置：首页 > JavaScript

js实现li轮播

2026-04-04 10:16:10JavaScript

实现基础轮播结构

HTML部分需创建一个包含轮播项的ul列表和导航按钮：

<div class="carousel-container">
  <ul class="carousel-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <button class="prev-btn">Previous</button>
  <button class="next-btn">Next</button>
</div>

添加CSS样式

通过CSS设置横向排列和隐藏溢出内容：

js实现li轮播

.carousel-container {
  width: 300px;
  overflow: hidden;
  position: relative;
}
.carousel-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  transition: transform 0.5s ease;
}
.carousel-list li {
  min-width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #f0f0f0;
}

JavaScript轮播逻辑

使用变量跟踪当前索引，并通过事件监听器切换显示项：

js实现li轮播

document.addEventListener('DOMContentLoaded', () => {
  const list = document.querySelector('.carousel-list');
  const items = document.querySelectorAll('.carousel-list li');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  let currentIndex = 0;

  function updateCarousel() {
    list.style.transform = `translateX(-${currentIndex * 100}%)`;
  }

  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % items.length;
    updateCarousel();
  });

  prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + items.length) % items.length;
    updateCarousel();
  });
});

自动轮播功能

添加定时器实现自动播放，鼠标悬停时暂停：

let autoPlayInterval = setInterval(() => {
  currentIndex = (currentIndex + 1) % items.length;
  updateCarousel();
}, 3000);

document.querySelector('.carousel-container').addEventListener('mouseenter', () => {
  clearInterval(autoPlayInterval);
});

document.querySelector('.carousel-container').addEventListener('mouseleave', () => {
  autoPlayInterval = setInterval(() => {
    currentIndex = (currentIndex + 1) % items.length;
    updateCarousel();
  }, 3000);
});

响应式调整

通过监听窗口变化动态计算轮播项宽度：

function handleResize() {
  items.forEach(item => {
    item.style.minWidth = `${list.offsetWidth}px`;
  });
  updateCarousel();
}

window.addEventListener('resize', handleResize);
handleResize(); // 初始化