js实现图片滑轮

实现图片滑轮（轮播图）的JavaScript方法

基础HTML结构 创建一个包含图片列表的容器，通常使用<div>和<img>标签：

<div class="slider-container">
  <div class="slider-track">
    <img src="image1.jpg" class="slide">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
</div>

CSS样式准备 设置容器和图片的样式，确保横向排列且隐藏溢出：

.slider-container {
  width: 600px;
  overflow: hidden;
  position: relative;
}
.slider-track {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 600px;
  height: 400px;
  object-fit: cover;
}

核心JavaScript实现 通过修改transform属性实现滑动效果：

const track = document.querySelector('.slider-track');
const slides = Array.from(document.querySelectorAll('.slide'));
let currentIndex = 0;

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

// 自动轮播
setInterval(() => {
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlider();
}, 3000);

进阶功能扩展

添加导航按钮 在HTML中添加控制按钮：

<button class="prev-btn">Previous</button>
<button class="next-btn">Next</button>

对应的JavaScript事件处理：

document.querySelector('.next-btn').addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlider();
});

document.querySelector('.prev-btn').addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  updateSlider();
});

指示器实现 添加当前图片位置的指示点：

const dotsContainer = document.createElement('div');
dotsContainer.className = 'dots-container';
slides.forEach((_, i) => {
  const dot = document.createElement('span');
  dot.addEventListener('click', () => {
    currentIndex = i;
    updateSlider();
    updateDots();
  });
  dotsContainer.appendChild(dot);
});
document.querySelector('.slider-container').appendChild(dotsContainer);

function updateDots() {
  const dots = document.querySelectorAll('.dots-container span');
  dots.forEach((dot, i) => {
    dot.classList.toggle('active', i === currentIndex);
  });
}

响应式处理

窗口大小变化适配 通过监听resize事件调整滑块宽度：

function handleResize() {
  const containerWidth = document.querySelector('.slider-container').offsetWidth;
  document.querySelectorAll('.slide').forEach(slide => {
    slide.style.minWidth = `${containerWidth}px`;
  });
}

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

触摸事件支持 添加移动端触摸滑动支持：

let startX, moveX;
track.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

track.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].clientX;
  const diff = startX - moveX;
  track.style.transform = `translateX(calc(-${currentIndex * 100}% - ${diff}px))`;
});

track.addEventListener('touchend', () => {
  const threshold = 50;
  if (Math.abs(startX - moveX) > threshold) {
    if (startX > moveX) {
      currentIndex = Math.min(currentIndex + 1, slides.length - 1);
    } else {
      currentIndex = Math.max(currentIndex - 1, 0);
    }
  }
  updateSlider();
});