当前位置：首页 > JavaScript

js实现换图

2026-02-01 06:32:56JavaScript

使用JavaScript实现图片切换

通过DOM操作修改图片的src属性即可实现换图。以下是几种常见场景的实现方法：

基础图片切换

通过按钮点击切换预定义的图片路径：

js实现换图

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

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

定时自动轮播

设置定时器实现自动轮播效果：

let slideInterval = setInterval(changeImage, 2000);

// 鼠标悬停暂停轮播
imgElement.parentElement.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

// 鼠标离开恢复轮播
imgElement.parentElement.addEventListener('mouseleave', () => {
  slideInterval = setInterval(changeImage, 2000);
});

淡入淡出过渡效果

配合CSS实现平滑过渡：

js实现换图

.fade-in {
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

function fadeChangeImage(newSrc) {
  imgElement.classList.remove('fade-in');
  setTimeout(() => {
    imgElement.src = newSrc;
    imgElement.classList.add('fade-in');
  }, 500);
}

动态加载图片

从服务器获取图片列表后切换：

async function loadAndChangeImages() {
  const response = await fetch('/api/images');
  const imageList = await response.json();

  imageList.forEach((imgUrl, index) => {
    setTimeout(() => {
      imgElement.src = imgUrl;
    }, index * 2000);
  });
}

响应式图片切换

根据屏幕尺寸切换不同分辨率的图片：

function responsiveImageSwitch() {
  const screenWidth = window.innerWidth;
  const baseSrc = imgElement.dataset.base;

  if (screenWidth < 768) {
    imgElement.src = `${baseSrc}-mobile.jpg`;
  } else {
    imgElement.src = `${baseSrc}-desktop.jpg`;
  }
}

window.addEventListener('resize', responsiveImageSwitch);

以上方法可根据实际需求组合使用，注意在切换图片前预加载图片可避免显示延迟问题。

标签: js