当前位置：首页 > JavaScript

js 实现画廊

2026-04-06 22:49:54JavaScript

使用纯JavaScript实现基础画廊

创建HTML结构，包含图片容器和导航按钮

<div class="gallery">
  <div class="gallery-container">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

添加CSS样式控制画廊布局

.gallery {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

.gallery-container img {
  display: none;
  width: 100%;
  height: auto;
}

.gallery-container img.active {
  display: block;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

实现JavaScript画廊功能

document.addEventListener('DOMContentLoaded', function() {
  const images = document.querySelectorAll('.gallery-container img');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');
  let currentIndex = 0;

  function showImage(index) {
    images.forEach(img => img.classList.remove('active'));
    images[index].classList.add('active');
  }

  prevBtn.addEventListener('click', function() {
    currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
    showImage(currentIndex);
  });

  nextBtn.addEventListener('click', function() {
    currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
    showImage(currentIndex);
  });

  // 自动轮播
  setInterval(function() {
    currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
    showImage(currentIndex);
  }, 3000);

  showImage(currentIndex);
});

使用Swiper.js实现高级画廊

安装Swiper.js库

js 实现画廊

npm install swiper

HTML结构

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="image1.jpg">
    </div>
    <div class="swiper-slide">
      <img src="image2.jpg">
    </div>
    <div class="swiper-slide">
      <img src="image3.jpg">
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

初始化Swiper

import Swiper from 'swiper';
import 'swiper/css';

const swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: {
    delay: 3000,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

响应式画廊实现

添加媒体查询适应不同屏幕

js 实现画廊

@media (max-width: 768px) {
  .gallery {
    width: 100%;
  }

  .gallery-container img {
    height: 300px;
    object-fit: cover;
  }
}

JavaScript添加触摸事件支持

let touchStartX = 0;
let touchEndX = 0;

galleryContainer.addEventListener('touchstart', function(e) {
  touchStartX = e.changedTouches[0].screenX;
}, false);

galleryContainer.addEventListener('touchend', function(e) {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
}, false);

function handleSwipe() {
  if (touchEndX < touchStartX) {
    // 向左滑动，显示下一张
    currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
  }
  if (touchEndX > touchStartX) {
    // 向右滑动，显示上一张
    currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
  }
  showImage(currentIndex);
}

图片懒加载优化

修改HTML添加data-src属性

<img data-src="image1.jpg" class="active">
<img data-src="image2.jpg">
<img data-src="image3.jpg">

实现懒加载功能

function lazyLoadImages() {
  const lazyImages = document.querySelectorAll('img[data-src]');

  const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.getAttribute('data-src');
        img.removeAttribute('data-src');
        imageObserver.unobserve(img);
      }
    });
  });

  lazyImages.forEach(img => imageObserver.observe(img));
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);