html网页换图效果

基础换图方法

通过修改 <img> 标签的 src 属性实现图片切换，适用于静态或简单动态场景。

动态轮播图（自动切换）

通过定时器（如 setInterval）实现图片自动轮播。

示例代码

<div>
  <img id="slider" src="image1.jpg" alt="轮播图">
</div>
<script>
  const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
  let index = 0;
  setInterval(() => {
    index = (index + 1) % images.length;
    document.getElementById('slider').src = images[index];
  }, 3000); // 每3秒切换一次
</script>

事件触发换图

通过用户交互（点击、悬停等）触发图片切换。

点击按钮换图

<button onclick="changeImage('image2.jpg')">切换图片</button>
<img id="targetImage" src="image1.jpg" alt="可切换图片">
<script>
  function changeImage(newSrc) {
    document.getElementById('targetImage').src = newSrc;
  }
</script>

鼠标悬停换图

/ CSS 实现 /
img.hover-effect {
  transition: opacity 0.5s;
}
img.hover-effect:hover {
  opacity: 0;
}
img.hover-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('hover-image.jpg');
  opacity: 0;
  transition: opacity 0.5s;
}
img.hover-effect:hover::after {
  opacity: 1;
}

动画效果增强

通过 CSS3 或 JavaScript 添加过渡动画，提升用户体验。

CSS 淡入淡出

img.fade-transition {
  transition: opacity 1s;
}

// 配合 JavaScript 实现淡出效果
const img = document.querySelector('.fade-transition');
img.style.opacity = 0;
setTimeout(() => {
  img.src = 'new-image.jpg';
  img.style.opacity = 1;
}, 1000);

JavaScript 滑动切换

const images = ['slide1.jpg', 'slide2.jpg'];
let current = 0;
function slideImage() {
  const img = document.getElementById('slider');
  img.style.left = `-${current  100}%`; // 假设图片宽度为100%
  current = (current + 1) % images.length;
}
setInterval(slideImage, 3000);

注意事项

1. 路径正确性：确保图片路径与 HTML 文件相对位置正确。
2. 预加载优化：提前加载图片资源，避免切换时白屏。

   const preloadImage = (src) => {
     const img = new Image();
     img.src = src;
   };
   preloadImage('image3.jpg'); // 预加载下一张图

3. 无障碍支持：为 <img> 添加 alt 属性，确保屏幕阅读器兼容。

相关问题与解答

问题1：如何让换图过程更流畅？

解答：

• 使用 CSS3 过渡（transition）或动画（animation）添加缓动效果。
• 预加载下一张图片,避免切换时延迟。
• 示例：在切换前先降低当前图片透明度，再替换 src 并恢复透明度。

问题2：如何处理图片加载失败的情况？

解答：

• 监听 onerror 事件，提供备用图片或提示文本。
• 示例：

  const img = document.getElementById('myImage');
  img.onerror = () => {
    img.src = 'fallback.jpg'; // 备用图片
  };