js图片轮播和点击切换

实现图片轮播和点击切换有很多方法，下面是其中一种基于原生 JavaScript 的实现方法：

HTML 结构：

<div class="slider">
  <div class="slider-wrapper">
    <img src="img1.jpg" alt="Image 1">
    <img src="img2.jpg" alt="Image 2">
    <img src="img3.jpg" alt="Image 3">
    <img src="img4.jpg" alt="Image 4">
  </div>
  <div class="slider-nav">
    <span class="slider-nav-item active"></span>
    <span class="slider-nav-item"></span>
    <span class="slider-nav-item"></span>
    <span class="slider-nav-item"></span>
  </div>
</div>

CSS 样式：

.slider {
  position: relative;
  width: 600px;
  height: 300px;
  overflow: hidden;
}
.slider-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 2400px;
  height: 300px;
}
.slider-wrapper img {
  float: left;
  width: 600px;
  height: 300px;
}
.slider-nav {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
}
.slider-nav-item {
  width: 12px;
  height: 12px;
  margin-left: 10px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}
.slider-nav-item.active {
  background-color: #f00;
}

JavaScript 代码：

const slider = document.querySelector('.slider');
const wrapper = slider.querySelector('.slider-wrapper');
const items = wrapper.querySelectorAll('img');
const nav = slider.querySelector('.slider-nav');
const navItems = nav.querySelectorAll('.slider-nav-item');

let currentItemIndex = 0;

// 自动轮播
function autoPlay() {
  currentItemIndex++;
  if (currentItemIndex >= items.length) {
    currentItemIndex = 0;
  }
  switchTo(currentItemIndex);
  setTimeout(autoPlay, 3000);
}

// 切换到指定图片
function switchTo(index) {
  wrapper.style.transform = `translateX(-${index * 100}%)`;
  navItems[currentItemIndex].classList.remove('active');
  navItems[index].classList.add('active');
  currentItemIndex = index;
}

// 点击导航切换图片
nav.addEventListener('click', e => {
  const target = e.target;
  if (target.classList.contains('slider-nav-item')) {
    const index = Array.from(navItems).indexOf(target);
    switchTo(index);
  }
});

// 开始自动轮播
setTimeout(autoPlay, 3000);

实现原理：

1. 使用绝对定位将 `.slider-wrapper` 定位到 `.slider` 中，并设置它的宽度为所有图片宽度之和，高度为单张图片高度。
2. 通过 `transform: translateX()` 实现图片的切换效果。
3. 点击导航时，根据点击的导航项的索引值切换到对应的图片。
4. 使用定时器实现自动轮播效果。