js实现图片滑轮

实现图片滑轮效果

图片滑轮（轮播图）是网页常见的交互组件，可通过JavaScript结合CSS实现。以下是两种常见实现方式：

基础DOM操作实现

通过修改元素的transform或left属性实现滑动动画：

let currentIndex = 0;
const slider = document.querySelector('.slider');
const items = document.querySelectorAll('.slider-item');
const itemWidth = items[0].offsetWidth;

function slideTo(index) {
  currentIndex = (index + items.length) % items.length;
  slider.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
}

// 自动轮播
setInterval(() => slideTo(currentIndex + 1), 3000);

使用CSS过渡效果

结合CSS的transition属性实现平滑动画：

.slider {
  display: flex;
  transition: transform 0.5s ease;
}
.slider-item {
  flex: 0 0 100%;
}

function slideTo(index) {
  currentIndex = index;
  slider.style.transform = `translateX(-${currentIndex * 100}%)`;
}

无限循环处理

克隆首尾元素实现无缝循环：

// 初始化时克隆元素
const firstClone = items[0].cloneNode(true);
const lastClone = items[items.length - 1].cloneNode(true);
slider.appendChild(firstClone);
slider.insertBefore(lastClone, items[0]);

// 滑动时边界判断
function handleSlideEnd() {
  if (currentIndex >= items.length) {
    currentIndex = 0;
    slider.style.transition = 'none';
    slider.style.transform = `translateX(0)`;
    setTimeout(() => {
      slider.style.transition = 'transform 0.5s ease';
    });
  }
}

触摸事件支持

添加移动端触摸交互：

let startX, moveX;

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

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

slider.addEventListener('touchend', () => {
  if (Math.abs(moveX) > 50) {
    slideTo(moveX > 0 ? currentIndex - 1 : currentIndex + 1);
  } else {
    slideTo(currentIndex);
  }
});

使用现成库方案

对于生产环境，推荐使用成熟轮播库：

1. Swiper.js
   安装：npm install swiper
   示例代码：

   import Swiper from 'swiper';
   new Swiper('.swiper-container', {
     loop: true,
     autoplay: {
       delay: 3000,
     },
     navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
     },
   });

2. Glide.js
   轻量级解决方案：

   

   new Glide('.glide', {
     type: 'carousel',
     perView: 3,
     focusAt: 'center'
   }).mount();

性能优化建议

• 使用will-change: transform提升动画性能
• 图片懒加载避免初始加载压力
• 使用requestAnimationFrame替代定时器
• 移动端启用硬件加速：

  .slider {
    transform: translateZ(0);
  }