js实现大小图

实现大小图切换的 JavaScript 方法

监听点击事件切换图片 通过监听图片的点击事件，动态切换图片的 src 属性。预先准备好大图和小图的路径，点击时判断当前状态并切换。

const imgElement = document.getElementById('toggleImage');
let isLarge = false;

imgElement.addEventListener('click', function() {
    if (isLarge) {
        imgElement.src = 'small-image.jpg';
        imgElement.alt = '小图';
    } else {
        imgElement.src = 'large-image.jpg';
        imgElement.alt = '大图';
    }
    isLarge = !isLarge;
});

使用 CSS 控制显示隐藏 通过 JavaScript 切换 CSS 类，控制大图和小图的显示与隐藏。这种方法适合需要保持两张图同时存在于 DOM 中的场景。

const smallImg = document.getElementById('smallImg');
const largeImg = document.getElementById('largeImg');

smallImg.addEventListener('click', function() {
    smallImg.classList.add('hidden');
    largeImg.classList.remove('hidden');
});

largeImg.addEventListener('click', function() {
    largeImg.classList.add('hidden');
    smallImg.classList.remove('hidden');
});

对应的 CSS 样式：

.hidden {
    display: none;
}

动态加载图片 在需要时才加载大图，减少初始页面加载时间。点击小图时动态创建大图元素并插入到 DOM 中。

const smallImg = document.getElementById('smallImg');

smallImg.addEventListener('click', function() {
    const largeImg = document.createElement('img');
    largeImg.src = 'large-image.jpg';
    largeImg.alt = '大图';
    largeImg.className = 'large-image';

    smallImg.parentNode.replaceChild(largeImg, smallImg);

    largeImg.addEventListener('click', function() {
        largeImg.parentNode.replaceChild(smallImg, largeImg);
    });
});

使用背景图切换 通过改变元素的背景图来实现大小图切换。这种方法适用于使用背景图而非 <img> 标签的情况。

const imageContainer = document.getElementById('imageContainer');
let isLarge = false;

imageContainer.addEventListener('click', function() {
    if (isLarge) {
        imageContainer.style.backgroundImage = 'url(small-image.jpg)';
    } else {
        imageContainer.style.backgroundImage = 'url(large-image.jpg)';
    }
    isLarge = !isLarge;
});

注意事项

• 确保图片路径正确，避免因路径错误导致图片无法加载。
• 对于大图，考虑使用预加载技术，避免切换时出现延迟。
• 如果图片比例不同，需要设置 width 和 height 或使用 object-fit 保持显示一致。
• 移动端注意添加触摸事件支持，如 touchstart。

以上方法可根据具体需求选择使用，每种方法都有其适用场景。第一种方法适合简单的单图切换，第二种适合需要同时保留两张图的场景，第三种适合优化加载性能，第四种适合背景图应用。