用js实现图片切换效果

基础图片切换实现

通过修改<img>标签的src属性实现图片切换：

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;
const imgElement = document.getElementById('slideshow');

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

// 每3秒切换一次
setInterval(changeImage, 3000);

淡入淡出过渡效果

使用CSS过渡实现平滑的淡入淡出效果：

<style>
  .fade {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .fade.show {
    opacity: 1;
  }
</style>

<script>
  const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
  let currentIndex = 0;
  const imgElement = document.getElementById('slideshow');

  function fadeImage() {
    imgElement.classList.remove('show');

    setTimeout(() => {
      currentIndex = (currentIndex + 1) % images.length;
      imgElement.src = images[currentIndex];
      imgElement.classList.add('show');
    }, 1000);
  }

  setInterval(fadeImage, 3000);
</script>

幻灯片轮播组件

创建包含导航按钮的完整幻灯片组件：

class Slideshow {
  constructor(containerId, images) {
    this.images = images;
    this.currentIndex = 0;
    this.container = document.getElementById(containerId);
    this.init();
  }

  init() {
    this.container.innerHTML = `
      <div class="slide-container">
        <img src="${this.images[0]}" class="active">
        <button class="prev">❮</button>
        <button class="next">❯</button>
      </div>
    `;

    this.slideElement = this.container.querySelector('img');
    this.prevBtn = this.container.querySelector('.prev');
    this.nextBtn = this.container.querySelector('.next');

    this.prevBtn.addEventListener('click', () => this.prevSlide());
    this.nextBtn.addEventListener('click', () => this.nextSlide());
  }

  nextSlide() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
    this.updateSlide();
  }

  prevSlide() {
    this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    this.updateSlide();
  }

  updateSlide() {
    this.slideElement.classList.remove('active');
    setTimeout(() => {
      this.slideElement.src = this.images[this.currentIndex];
      this.slideElement.classList.add('active');
    }, 500);
  }
}

// 使用示例
new Slideshow('slideshow-container', ['img1.jpg', 'img2.jpg', 'img3.jpg']);

响应式图片切换

根据窗口大小加载不同尺寸的图片：

function responsiveImageSwitcher() {
  const imageSets = {
    small: ['small1.jpg', 'small2.jpg'],
    medium: ['medium1.jpg', 'medium2.jpg'],
    large: ['large1.jpg', 'large2.jpg']
  };

  function getCurrentSet() {
    const width = window.innerWidth;
    if (width < 768) return imageSets.small;
    if (width < 1024) return imageSets.medium;
    return imageSets.large;
  }

  let currentImages = getCurrentSet();
  let currentIndex = 0;
  const imgElement = document.getElementById('responsive-image');

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

  window.addEventListener('resize', () => {
    currentImages = getCurrentSet();
    currentIndex = 0;
    imgElement.src = currentImages[0];
  });

  setInterval(switchImage, 3000);
}

预加载图片优化

确保图片切换时不会出现加载延迟：

function preloadImages(imageUrls) {
  imageUrls.forEach(url => {
    const img = new Image();
    img.src = url;
  });
}

const images = ['large1.jpg', 'large2.jpg', 'large3.jpg'];
preloadImages(images);

let currentIndex = 0;
const imgElement = document.getElementById('preload-slideshow');

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

setInterval(showNextImage, 2000);