html5交换图片

基础实现方法

使用JavaScript修改img标签src属性

function swapImage(){
var img = document.getElementById(‘target’);
img.src = img.src === ‘img1.jpg’ ? ‘img2.jpg’ : ‘img1.jpg’;
}

# 2. 鼠标悬停触发切换
| 代码结构 | 说明 |
|---------|------|
| `<img class="hover-img" src="normal.jpg" data-hover="active.jpg">` | 使用data属性存储备用图片路径 |
| ```javascript
  var images = document.querySelectorAll('.hover-img');
  images.forEach(function(img){
    img.onmouseover = function(){
      this.src = this.getAttribute('data-hover');
    }
    img.onmouseout = function(){
      this.src = this.getAttribute('data-src') || 'normal.jpg';
    }
  })
  ``` | 实现鼠标悬停时切换效果 |
 二、进阶应用示例
# 1. 图片轮播组件
| 技术要点 | 实现方式 |
|----------|----------|
| 自动轮播 | 使用`setInterval`定时切换图片 |
| 手动控制 | 添加左右箭头按钮并绑定事件 |
| 过渡效果 | 配合CSS3过渡或动画属性 |
```html
<div class="carousel">
  <img id="slideshow" src="slide1.jpg">
  <button class="prev">&#10094;</button>
  <button class="next">&#10095;</button>
</div>
<script>
  var images = ['slide1.jpg','slide2.jpg','slide3.jpg'];
  var current = 0;
  document.querySelector('.next').onclick = function(){
    current = (current+1) % images.length;
    document.getElementById('slideshow').src = images[current];
  }
  // 类似实现上一个按钮逻辑
</script>

图片懒加载优化

function lazyLoad(){
  var imgs = document.querySelectorAll('img[data-src]');
  imgs.forEach(function(img){
    if(img.offsetTop < window.innerHeight + scrollY){
      img.src = img.getAttribute('data-src');
      img.removeAttribute('data-src');
    }
  })
}
window.addEventListener('scroll',lazyLoad);

注意事项

1. 路径问题：相对路径需注意html文件所在位置，建议使用绝对路径或部署时统一管理资源目录
2. 跨域限制：网络图片需注意CORS策略，可考虑将图片存储在同源服务器
3. 性能优化：预加载常用图片new Image().src='path'，减少首次加载等待时间
4. 访问控制：敏感图片建议添加权限验证，防止未授权访问

相关问题与解答

Q1：如何实现点击图片本身进行切换？
A：可通过封装函数实现自切换功能：

document.getElementById('self-toggle').onclick = function(){
  this.src = this.src.includes('a.jpg') ? 'b.jpg' : 'a.jpg';
}

Q2：多张图片连续切换如何实现？
A：使用数组存储图片路径，配合索引递增实现循环：

var gallery = ['img1.jpg','img2.jpg','img3.jpg'];
var index = 0;
function nextImage(){
  document.getElementById('gallery').src = gallery[index++ % gallery.length];
}