实现js轮播

使用纯JavaScript实现轮播

创建HTML结构，包含轮播容器和图片列表

<div class="slider-container">
  <div class="slider">
    <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样式

.slider-container {
  position: relative;
  width: 800px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.5s ease;
}

.slider img {
  width: 800px;
  height: 400px;
  object-fit: cover;
  flex-shrink: 0;
  display: none;
}

.slider img.active {
  display: block;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

JavaScript实现核心功能

document.addEventListener('DOMContentLoaded', function() {
  const slider = document.querySelector('.slider');
  const images = document.querySelectorAll('.slider img');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');

  let currentIndex = 0;
  const totalImages = images.length;

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

  function nextImage() {
    currentIndex = (currentIndex + 1) % totalImages;
    showImage(currentIndex);
  }

  function prevImage() {
    currentIndex = (currentIndex - 1 + totalImages) % totalImages;
    showImage(currentIndex);
  }

  nextBtn.addEventListener('click', nextImage);
  prevBtn.addEventListener('click', prevImage);

  // 自动轮播
  let interval = setInterval(nextImage, 3000);

  // 鼠标悬停时暂停
  slider.addEventListener('mouseenter', () => clearInterval(interval));
  slider.addEventListener('mouseleave', () => interval = setInterval(nextImage, 3000));
});

使用CSS过渡效果替代display切换

修改CSS部分实现平滑过渡

.slider {
  display: flex;
  transition: transform 0.5s ease;
  width: 2400px; /* 3张图片的宽度 */
}

.slider img {
  width: 800px;
  height: 400px;
  object-fit: cover;
  flex-shrink: 0;
}

更新JavaScript代码

function showImage(index) {
  const offset = -index * 800;
  slider.style.transform = `translateX(${offset}px)`;
}

添加指示器小点

HTML添加指示器

<div class="indicators"></div>

CSS样式

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  margin: 0 5px;
  cursor: pointer;
}

.indicator.active {
  background: white;
}

JavaScript更新

// 创建指示器
const indicatorsContainer = document.querySelector('.indicators');
images.forEach((_, index) => {
  const dot = document.createElement('div');
  dot.classList.add('indicator');
  if(index === 0) dot.classList.add('active');
  dot.addEventListener('click', () => {
    currentIndex = index;
    showImage(currentIndex);
    updateIndicators();
  });
  indicatorsContainer.appendChild(dot);
});

function updateIndicators() {
  const dots = document.querySelectorAll('.indicator');
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === currentIndex);
  });
}

// 在showImage函数中调用updateIndicators
function showImage(index) {
  // ...原有代码
  updateIndicators();
}

响应式设计调整

添加媒体查询

@media (max-width: 800px) {
  .slider-container, .slider img {
    width: 100%;
    height: 300px;
  }

  .slider {
    width: 300%; /* 3张图片的宽度 */
  }

  function showImage(index) {
    const containerWidth = document.querySelector('.slider-container').offsetWidth;
    const offset = -index * containerWidth;
    slider.style.transform = `translateX(${offset}px)`;
  }
}