js实现图片播放

实现图片轮播的基础方法

使用HTML和JavaScript创建一个简单的图片轮播器。准备一个包含图片的数组，通过定时器切换显示的图片。

<div id="slider">
  <img id="slide" src="image1.jpg" alt="Slide">
</div>

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;

function changeSlide() {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById('slide').src = images[currentIndex];
}

setInterval(changeSlide, 3000);

添加导航控制

为轮播器添加前进和后退按钮，增强用户交互体验。

<div id="slider">
  <img id="slide" src="image1.jpg" alt="Slide">
  <button id="prev">Previous</button>
  <button id="next">Next</button>
</div>

document.getElementById('next').addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.length;
  updateSlide();
});

document.getElementById('prev').addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  updateSlide();
});

function updateSlide() {
  document.getElementById('slide').src = images[currentIndex];
}

添加过渡动画效果

使用CSS为图片切换添加平滑的过渡效果，提升视觉体验。

#slider {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

#slide {
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
}

.fade {
  opacity: 0;
}

function updateSlide() {
  const slide = document.getElementById('slide');
  slide.classList.add('fade');

  setTimeout(() => {
    slide.src = images[currentIndex];
    slide.classList.remove('fade');
  }, 500);
}

响应式轮播实现

确保轮播器在不同屏幕尺寸下都能正常显示，使用百分比宽度和媒体查询。

#slider {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  #slider {
    height: 200px;
  }
}

预加载图片优化

提前加载所有图片，避免切换时的延迟问题。

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

window.onload = preloadImages;

使用第三方库实现

考虑使用成熟的轮播库如Swiper.js，快速实现功能丰富的轮播效果。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg"></div>
    <div class="swiper-slide"><img src="image2.jpg"></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper('.swiper-container', {
    loop: true,
    autoplay: {
      delay: 3000,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>