当前位置：首页 > JavaScript

js实现大小图

2026-04-07 15:44:12JavaScript

使用 JavaScript 实现大小图切换

方法一：通过修改 src 属性切换图片

// HTML 结构示例
// <img id="myImage" src="small.jpg" onclick="toggleImage()">

function toggleImage() {
  const img = document.getElementById('myImage');
  if (img.src.includes('small.jpg')) {
    img.src = 'large.jpg';
  } else {
    img.src = 'small.jpg';
  }
}

方法二：使用 CSS 控制显示/隐藏

// HTML 结构示例
// <img id="smallImg" src="small.jpg" onclick="showLarge()">
// <img id="largeImg" src="large.jpg" style="display:none;" onclick="hideLarge()">

function showLarge() {
  document.getElementById('smallImg').style.display = 'none';
  document.getElementById('largeImg').style.display = 'block';
}

function hideLarge() {
  document.getElementById('largeImg').style.display = 'none';
  document.getElementById('smallImg').style.display = 'block';
}

方法三：使用类名切换实现动画效果

// CSS 示例
// .small { width: 100px; transition: all 0.3s; }
// .large { width: 300px; }

// HTML 结构示例
// <img id="zoomImage" class="small" src="image.jpg" onclick="zoomImage()">

function zoomImage() {
  const img = document.getElementById('zoomImage');
  img.classList.toggle('small');
  img.classList.toggle('large');
}

方法四：使用背景图切换

js实现大小图

// HTML 结构示例
// <div id="imageContainer" style="width:100px;height:100px;background-image:url('small.jpg')" onclick="changeBgImage()"></div>

function changeBgImage() {
  const container = document.getElementById('imageContainer');
  if (container.style.backgroundImage.includes('small.jpg')) {
    container.style.backgroundImage = "url('large.jpg')";
    container.style.width = '300px';
    container.style.height = '300px';
  } else {
    container.style.backgroundImage = "url('small.jpg')";
    container.style.width = '100px';
    container.style.height = '100px';
  }
}

实现缩略图画廊效果

// HTML 结构示例
/*
<div class="thumbnail-container">
  <img src="thumb1.jpg" onclick="showLarge('full1.jpg')">
  <img src="thumb2.jpg" onclick="showLarge('full2.jpg')">
</div>
<div id="largeViewContainer">
  <img id="largeImage">
</div>
*/

function showLarge(imageUrl) {
  document.getElementById('largeImage').src = imageUrl;
  document.getElementById('largeViewContainer').style.display = 'block';
}

// 可添加关闭大图功能
function closeLarge() {
  document.getElementById('largeViewContainer').style.display = 'none';
}

使用事件委托优化性能

// HTML 结构示例
/*
<div id="gallery">
  <img data-small="small1.jpg" data-large="large1.jpg" src="small1.jpg">
  <img data-small="small2.jpg" data-large="large2.jpg" src="small2.jpg">
</div>
*/

document.getElementById('gallery').addEventListener('click', function(e) {
  if (e.target.tagName === 'IMG') {
    const img = e.target;
    const currentSrc = img.src;
    img.src = currentSrc.includes(img.dataset.small) 
      ? img.dataset.large 
      : img.dataset.small;
  }
});

响应式图片切换方案

// 根据屏幕宽度自动切换图片大小
function responsiveImages() {
  const images = document.querySelectorAll('[data-responsive]');
  const screenWidth = window.innerWidth;

  images.forEach(img => {
    img.src = screenWidth > 768 
      ? img.dataset.large 
      : img.dataset.small;
  });
}

// 监听窗口变化
window.addEventListener('resize', responsiveImages);
// 初始化执行
responsiveImages();

以上方法可根据实际需求选择或组合使用，实现不同场景下的图片大小切换效果。