js 怎样实现轮播图

实现轮播图的核心是控制图片的显示与隐藏及动画流畅性，1. 通过html构建图片容器和控制按钮，2. 使用css的flex布局和transform配合transition实现图片滑动效果，3. 利用javascript控制图片索引（counter）并绑定前后切换逻辑，4. 添加自动轮播功能并通过mouseover和mouseout事件实现悬停暂停，5. 为提升性能可压缩图片、使用webp格式、启用css硬件加速、避免频繁dom操作、采用intersection observer延迟加载、使用requestanimationframe优化动画，6. 实现无缝轮播需复制首尾图片并借助transitionend事件在边界瞬间跳转且临时移除过渡效果，7. 支持触摸滑动则需监听touchstart、touchmove、touchend事件，记录滑动距离并实时更新translatex值，根据滑动阈值触发前后切换或回弹，同时在滑动期间暂停自动轮播，最终确保轮播图交互流畅且用户体验良好。

实现轮播图，简单来说，就是让图片像走马灯一样循环播放。核心在于控制图片的显示与隐藏，以及动画效果的流畅过渡。

解决方案

首先，你需要一个包含所有轮播图片的容器，以及控制轮播的按钮（可选）。

HTML结构：

  

    @@##@@
    @@##@@
    @@##@@
  
  Prev
  Next

CSS样式（简化版）：

.slider-container {
  width: 500px;
  overflow: hidden; /* 隐藏超出容器的图片 */
  position: relative;
}

.slider {
  display: flex; /* 让图片横向排列 */
  transition: transform 0.5s ease-in-out; /* 添加过渡效果 */
}

.slider img {
  width: 500px; /* 保证每张图片宽度一致 */
  flex-shrink: 0; /* 防止图片被压缩 */
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

JavaScript代码：

2019最新原生js实现带缩略图文字说明左右轮播切换相册插件

简单实用原生js实现带缩略图文字说明左右轮播切换相册插件下载。一款基于原生JavaScript实现图片相册幻灯轮播图特效插件，没有引入任何jQuery库，短短数行原生php中文网实现。

下载

const sliderContainer = document.querySelector('.slider-container');
const slider = document.querySelector('.slider');
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
const images = document.querySelectorAll('.slider img');

let counter = 0;
const imageWidth = images[0].clientWidth; // 获取图片宽度

// 初始化第一张图片的位置
slider.style.transform = `translateX(${-imageWidth * counter}px)`;

nextButton.addEventListener('click', () => {
  counter++;
  if (counter >= images.length) {
    counter = 0;
  }
  slider.style.transition = 'transform 0.5s ease-in-out'; // 确保有过渡效果
  slider.style.transform = `translateX(${-imageWidth * counter}px)`;
});

prevButton.addEventListener('click', () => {
  counter--;
  if (counter < 0) {
    counter = images.length - 1;
  }
  slider.style.transition = 'transform 0.5s ease-in-out'; // 确保有过渡效果
  slider.style.transform = `translateX(${-imageWidth * counter}px)`;
});

// 自动轮播
let intervalId = setInterval(() => {
  nextButton.click();
}, 3000); // 每3秒切换一次

// 鼠标悬停时停止自动轮播
sliderContainer.addEventListener('mouseover', () => {
  clearInterval(intervalId);
});

// 鼠标离开时恢复自动轮播
sliderContainer.addEventListener('mouseout', () => {
  intervalId = setInterval(() => {
    nextButton.click();
  }, 3000);
});

slider.addEventListener('transitionend', () => {
  // 当过渡动画结束后执行一些操作，例如处理循环轮播的边界情况
  // (可选，根据具体需求添加)
});

这段代码的核心是使用

transform: translateX()

.slider

counter

transitionend

如何优化轮播图的性能，避免卡顿？

1. 图片优化： 压缩图片大小，使用适当的图片格式（WebP 通常更优），避免加载过大的图片。
2. CSS硬件加速： 确保 CSS 动画利用硬件加速。

   transform

   和

   opacity

   属性通常能触发硬件加速。
3. 节流/防抖： 如果轮播图有复杂的事件监听器，使用节流或防抖来限制事件处理频率。
4. Intersection Observer： 使用 Intersection Observer API 来延迟加载不在可视区域内的图片，提高初始加载速度。
5. 避免频繁操作DOM： 尽量减少对 DOM 的直接操作，例如批量更新样式。
6. 使用 requestAnimationFrame： 在动画中使用

   requestAnimationFrame

   来确保动画流畅。
7. 避免使用复杂的CSS选择器：复杂的CSS选择器会降低渲染性能。

如何实现无缝轮播？

无缝轮播的关键在于在视觉上让用户感觉图片是无限循环的。 一种常见的实现方式是复制第一张和最后一张图片，并将它们分别添加到轮播图的末尾和开头。

1. 复制图片： 在 HTML 中，复制第一张图片到末尾，复制最后一张图片到开头。
2. 调整初始位置： 将轮播图的初始位置设置为第二张图片（原始的第一张图片）。
3. 处理边界情况： 在

   transitionend

   事件中，当轮播到第一张复制的图片时，立即跳到原始的最后一张图片；当轮播到最后一张复制的图片时，立即跳到原始的第一张图片。 这个跳转需要立即完成，不能有动画效果，所以需要在跳转前移除

   transition

   属性，跳转后再添加回来。

slider.addEventListener('transitionend', () => {
  if (images[counter] === images[0]) { // 轮播到复制的第一张图片
    slider.style.transition = 'none';
    counter = images.length - 2; // 跳到原始的最后一张图片
    slider.style.transform = `translateX(${-imageWidth * counter}px)`;
    setTimeout(() => {
      slider.style.transition = 'transform 0.5s ease-in-out';
    }, 0); // 恢复过渡效果
  }
  if (images[counter] === images[images.length - 1]) { // 轮播到复制的最后一张图片
    slider.style.transition = 'none';
    counter = 1; // 跳到原始的第一张图片
    slider.style.transform = `translateX(${-imageWidth * counter}px)`;
    setTimeout(() => {
      slider.style.transition = 'transform 0.5s ease-in-out';
    }, 0); // 恢复过渡效果
  }
});

如何让轮播图支持触摸滑动？

1. 监听触摸事件： 监听

   touchstart

   、

   touchmove

   和

   touchend

   事件。
2. 记录触摸位置： 在

   touchstart

   事件中记录初始触摸位置。
3. 计算滑动距离： 在

   touchmove

   事件中计算滑动距离。
4. 更新轮播图位置： 根据滑动距离更新轮播图的位置。
5. 处理滑动结束： 在

   touchend

   事件中，根据滑动距离和速度判断是切换到下一张还是上一张图片。

let touchStartX = 0;
let touchEndX = 0;

sliderContainer.addEventListener('touchstart', (e) => {
  touchStartX = e.touches[0].clientX;
  clearInterval(intervalId); // 停止自动轮播
});

sliderContainer.addEventListener('touchmove', (e) => {
  touchEndX = e.touches[0].clientX;
  const diffX = touchEndX - touchStartX;
  slider.style.transition = 'none'; // 移除过渡效果
  slider.style.transform = `translateX(${-imageWidth * counter + diffX}px)`;
});

sliderContainer.addEventListener('touchend', (e) => {
  slider.style.transition = 'transform 0.5s ease-in-out'; // 恢复过渡效果
  const diffX = touchEndX - touchStartX;
  if (diffX > 50) { // 滑动距离大于 50px，切换到上一张
    prevButton.click();
  } else if (diffX < -50) { // 滑动距离小于 -50px，切换到下一张
    nextButton.click();
  } else { // 滑动距离太小，恢复到当前图片
    slider.style.transform = `translateX(${-imageWidth * counter}px)`;
  }
  intervalId = setInterval(() => { // 恢复自动轮播
    nextButton.click();
  }, 3000);
});