当前位置：首页 > JavaScript

js怎么实现图片切换

2026-01-30 17:46:49JavaScript

使用原生JavaScript实现图片切换

通过设置定时器或事件触发切换<img>元素的src属性

let currentIndex = 0;
const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
const imgElement = document.getElementById('myImage');

function changeImage() {
  currentIndex = (currentIndex + 1) % images.length;
  imgElement.src = images[currentIndex];
}

// 自动轮播
setInterval(changeImage, 3000);

// 点击切换
document.getElementById('nextBtn').addEventListener('click', changeImage);

使用CSS过渡效果增强切换

结合CSS实现淡入淡出效果

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function nextSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

对应CSS样式：

.slide {
  opacity: 0;
  transition: opacity 1s;
  position: absolute;
}
.slide.active {
  opacity: 1;
}

实现图片画廊预览

创建缩略图点击切换主图功能

const thumbnails = document.querySelectorAll('.thumbnail');
const mainImage = document.getElementById('mainImage');

thumbnails.forEach(thumb => {
  thumb.addEventListener('click', function() {
    mainImage.src = this.dataset.fullsize;
    mainImage.alt = this.alt;
  });
});

HTML结构示例：

<img id="mainImage" src="default.jpg">
<div class="gallery">
  <img class="thumbnail" src="thumb1.jpg" data-fullsize="full1.jpg">
  <img class="thumbnail" src="thumb2.jpg" data-fullsize="full2.jpg">
</div>

响应式图片切换方案

根据屏幕尺寸加载不同图片

js怎么实现图片切换

function responsiveImageSwitch() {
  const screenWidth = window.innerWidth;
  const img = document.getElementById('responsiveImg');

  if(screenWidth >= 1024) {
    img.src = 'large.jpg';
  } else if(screenWidth >= 768) {
    img.src = 'medium.jpg';
  } else {
    img.src = 'small.jpg';
  }
}

window.addEventListener('resize', responsiveImageSwitch);
window.addEventListener('load', responsiveImageSwitch);