js 实现图片切换

图片切换实现方法

HTML 结构准备

创建包含图片和切换按钮的HTML结构，确保为图片和按钮设置合适的ID或类名以便操作。

<div class="image-slider">
  <img id="slider-image" src="image1.jpg" alt="Slider Image">
  <button id="prev-btn">Previous</button>
  <button id="next-btn">Next</button>
</div>

CSS 基础样式

为图片切换组件添加基本样式，确保图片显示区域和按钮布局合理。

.image-slider {
  position: relative;
  width: 600px;
  margin: 0 auto;
}

#slider-image {
  width: 100%;
  height: auto;
  display: block;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  cursor: pointer;
}

#prev-btn {
  left: 10px;
}

#next-btn {
  right: 10px;
}

JavaScript 核心功能

通过JavaScript实现图片切换逻辑，包括图片数组管理和事件监听。

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;
const sliderImage = document.getElementById('slider-image');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');

function updateImage() {
  sliderImage.src = images[currentIndex];
  sliderImage.alt = `Image ${currentIndex + 1}`;
}

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  updateImage();
});

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.length;
  updateImage();
});

// 初始化显示第一张图片
updateImage();

自动轮播功能扩展

添加定时器实现自动轮播效果，并增加鼠标悬停暂停功能。

let slideInterval = setInterval(() => {
  currentIndex = (currentIndex + 1) % images.length;
  updateImage();
}, 3000);

const sliderContainer = document.querySelector('.image-slider');
sliderContainer.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

sliderContainer.addEventListener('mouseleave', () => {
  slideInterval = setInterval(() => {
    currentIndex = (currentIndex + 1) % images.length;
    updateImage();
  }, 3000);
});

过渡动画增强

为图片切换添加平滑的淡入淡出效果，提升用户体验。

#slider-image {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

#slider-image.fade {
  opacity: 0;
}

function updateImage() {
  sliderImage.classList.add('fade');
  setTimeout(() => {
    sliderImage.src = images[currentIndex];
    sliderImage.alt = `Image ${currentIndex + 1}`;
    sliderImage.classList.remove('fade');
  }, 500);
}

响应式设计考虑

确保图片切换组件在不同设备上都能正常显示和使用。

@media (max-width: 768px) {
  .image-slider {
    width: 90%;
  }

  button {
    padding: 5px;
    font-size: 12px;
  }
}