当前位置：首页 > JavaScript

js实现换图

2026-04-05 23:01:28JavaScript

使用JavaScript实现图片切换

在网页开发中，通过JavaScript动态切换图片是一种常见的交互方式。以下是几种实现方法：

通过修改img元素的src属性

创建一个HTML img标签，并通过JavaScript修改其src属性来更换图片。

<img id="myImage" src="image1.jpg" alt="示例图片">
<button onclick="changeImage()">切换图片</button>

function changeImage() {
  const img = document.getElementById('myImage');
  if (img.src.match("image1")) {
    img.src = "image2.jpg";
  } else {
    img.src = "image1.jpg";
  }
}

使用数组存储图片路径

预先将图片路径存储在数组中，通过索引循环切换。

js实现换图

const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let currentIndex = 0;

function cycleImages() {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById('myImage').src = images[currentIndex];
}

添加过渡效果

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

#myImage {
  transition: opacity 0.5s ease-in-out;
}

function fadeImage(newSrc) {
  const img = document.getElementById('myImage');
  img.style.opacity = 0;

  setTimeout(() => {
    img.src = newSrc;
    img.style.opacity = 1;
  }, 500);
}

响应鼠标事件

实现鼠标悬停时自动切换图片的效果。

js实现换图

const img = document.getElementById('myImage');
const originalSrc = img.src;
const hoverSrc = "hover-image.jpg";

img.addEventListener('mouseover', () => {
  img.src = hoverSrc;
});

img.addEventListener('mouseout', () => {
  img.src = originalSrc;
});

使用定时器自动轮播

设置定时器实现图片自动轮播功能。

let slideIndex = 0;
const images = ["image1.jpg", "image2.jpg", "image3.jpg"];

function autoSlide() {
  slideIndex = (slideIndex + 1) % images.length;
  document.getElementById('myImage').src = images[slideIndex];
}

// 每3秒切换一次
setInterval(autoSlide, 3000);

预加载图片

对于需要频繁切换的图片，可以预先加载以提高性能。

function preloadImages(urls) {
  urls.forEach(url => {
    const img = new Image();
    img.src = url;
  });
}

preloadImages(["image1.jpg", "image2.jpg", "image3.jpg"]);

这些方法可以根据具体需求组合使用，实现更复杂的图片切换效果。实际应用中应注意图片加载性能和用户体验的平衡。

标签: js