js实现li轮播

2026-03-01 09:35:33JavaScript

实现 li 轮播的 JavaScript 方法

HTML 结构
确保有一个包含 li 元素的容器，例如：

js实现li轮播

<ul id="slider">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<button id="prev">Previous</button>
<button id="next">Next</button>

CSS 样式
为轮播添加基础样式，隐藏非活动项：

js实现li轮播

#slider {
  list-style: none;
  padding: 0;
  position: relative;
  height: 200px;
  overflow: hidden;
}
#slider li {
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s;
}
#slider li.active {
  opacity: 1;
}

JavaScript 逻辑
通过切换 active 类控制显示项：

const slider = document.getElementById('slider');
const items = slider.querySelectorAll('li');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let currentIndex = 0;

// 初始化显示第一项
items[currentIndex].classList.add('active');

// 下一项函数
function showNext() {
  items[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % items.length;
  items[currentIndex].classList.add('active');
}

// 上一项函数
function showPrev() {
  items[currentIndex].classList.remove('active');
  currentIndex = (currentIndex - 1 + items.length) % items.length;
  items[currentIndex].classList.add('active');
}

// 绑定按钮事件
nextBtn.addEventListener('click', showNext);
prevBtn.addEventListener('click', showPrev);

// 自动轮播（可选）
setInterval(showNext, 3000);

扩展功能：平滑滑动效果

若需水平滑动效果，修改 CSS 和 JavaScript：

#slider li {
  position: absolute;
  width: 100%;
  left: 100%;
  transition: left 0.5s;
}
#slider li.active {
  left: 0;
}
#slider li.prev {
  left: -100%;
}

function showNext() {
  items[currentIndex].classList.remove('active');
  items[currentIndex].classList.add('prev');
  currentIndex = (currentIndex + 1) % items.length;
  items[currentIndex].classList.add('active');
}