参考资料

  1. HTML DOM 哪个元素被按下了？
  2. HTML DOM 返回image的name
  3. HTML DOM改变表格的cellpadding和cellspacing
  4. HTML DOM添加表格中的行
  5. HTML DOM 返回文档的完整的URL实例
  6. HTML DOM 返回一个表单acceptCharset属性的值
  7. HTML DOM 获取第一个链接ID的实例
  8. HTML DOM 对iframe排版

HTML DOM 改变 image 的 src

基本介绍

通过 JavaScript 可以动态修改 HTML 中 <img> 元素的 src 属性，实现图片切换效果。

相关标签

  • <img> - 用于在网页中嵌入图像

  • <button> - 常用于触发图片切换的交互元素

基本用法

document.getElementById("myImage").src = "newImage.jpg";

完整实例

<!DOCTYPE html>
<html>
<head>
    <title>Image Source Change</title>
    <style>
        #imageContainer {
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }
        #myImage {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .btn {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            margin-right: 10px;
        }
        .btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div id="imageContainer">
        <img id="myImage" src="image1.jpg" alt="Sample Image">
    </div>
    
    <button class="btn" onclick="changeImage('image1.jpg')">Image 1</button>
    <button class="btn" onclick="changeImage('image2.jpg')">Image 2</button>
    <button class="btn" onclick="changeImage('image3.jpg')">Image 3</button>

    <script>
        function changeImage(newSrc) {
            document.getElementById("myImage").src = newSrc;
        }
    </script>
</body>
</html>

功能扩展

  1. 预加载图片:

function preloadImage(url) {
    const img = new Image();
    img.src = url;
}

// 预加载所有图片
preloadImage("image2.jpg");
preloadImage("image3.jpg");

  1. CSS 过渡效果:

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

.fade-out {
    opacity: 0;
}
function changeImageWithFade(newSrc) {
    const img = document.getElementById("myImage");
    img.classList.add("fade-out");
    
    setTimeout(() => {
        img.src = newSrc;
        img.classList.remove("fade-out");
    }, 500);
}

  1. 响应式图片切换:

function responsiveImageChange() {
    const screenWidth = window.innerWidth;
    const img = document.getElementById("myImage");
    
    if (screenWidth < 768) {
        img.src = "mobile-image.jpg";
    } else {
        img.src = "desktop-image.jpg";
    }
}

// 监听窗口大小变化
window.addEventListener("resize", responsiveImageChange);

  1. 懒加载实现:

<img id="myImage" data-src="image-to-lazy-load.jpg" src="placeholder.jpg" alt="Lazy Load Image">

<script>
document.addEventListener("DOMContentLoaded", function() {
    const lazyImage = document.getElementById("myImage");
    
    // 当图片进入视口时加载
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                lazyImage.src = lazyImage.dataset.src;
                observer.unobserve(lazyImage);
            }
        });
    });
    
    observer.observe(lazyImage);
});
</script>
TAG：基本元素效果动态属性标签网页图像发图片用法