当前位置：首页 > JavaScript

js实现图片切换

2026-04-04 01:03:08JavaScript

使用JavaScript实现图片切换

图片切换是网页开发中常见的功能，可以通过多种方式实现。以下是几种常见的方法：

通过修改src属性切换图片

创建一个图片数组，通过修改img元素的src属性实现切换：

js实现图片切换

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;
const imgElement = document.getElementById('myImage');

function changeImage() {
  currentIndex = (currentIndex + 1) % images.length;
  imgElement.src = images[currentIndex];
}

// 定时切换
setInterval(changeImage, 2000);

使用CSS类和display属性

通过切换CSS类或修改display属性实现图片轮播：

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function showSlide(index) {
  slides.forEach(slide => slide.style.display = 'none');
  slides[index].style.display = 'block';
}

function nextSlide() {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
}

showSlide(0);
setInterval(nextSlide, 3000);

添加过渡动画效果

为图片切换添加平滑的过渡效果：

js实现图片切换

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

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

function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  goToSlide(currentIndex);
}

// CSS需配合以下样式：
// .slider { display: flex; transition: transform 0.5s ease; }
// .slide { width: 100%; flex-shrink: 0; }

实现带有按钮控制的图片切换

添加前进和后退按钮控制图片切换：

const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const images = document.querySelectorAll('.gallery img');
let currentImg = 0;

function updateGallery() {
  images.forEach((img, index) => {
    img.style.display = index === currentImg ? 'block' : 'none';
  });
}

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

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

updateGallery();

使用Intersection Observer实现懒加载切换

对于大量图片，可以使用Intersection Observer API实现懒加载：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, {threshold: 0.1});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

这些方法可以根据具体需求进行组合和调整，实现不同风格的图片切换效果。