用js实现图片轮播

使用HTML和CSS搭建基础结构

创建一个包含图片容器和导航按钮的HTML结构。图片容器用于展示轮播图片，导航按钮用于切换图片。

<div class="slider-container">
  <div class="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="prev-btn">&#10094;</button>
  <button class="next-btn">&#10095;</button>
</div>

添加CSS样式，确保图片容器和导航按钮的布局正确。设置图片容器的宽度和高度，以及图片的显示方式。

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

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

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

实现基本轮播功能

使用JavaScript实现图片轮播的基本功能。通过控制图片容器的transform属性来实现图片切换。

const slider = document.querySelector('.slider');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const images = document.querySelectorAll('.slider img');

let currentIndex = 0;
const slideWidth = slider.clientWidth;

function updateSlider() {
  slider.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}

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

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

添加自动轮播功能

通过setInterval实现自动轮播功能。设置一个定时器，每隔一定时间自动切换到下一张图片。

let intervalId;

function startAutoSlide() {
  intervalId = setInterval(() => {
    currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
    updateSlider();
  }, 3000);
}

function stopAutoSlide() {
  clearInterval(intervalId);
}

startAutoSlide();

slider.addEventListener('mouseenter', stopAutoSlide);
slider.addEventListener('mouseleave', startAutoSlide);

添加指示器

在轮播图底部添加指示器，显示当前图片的位置。通过点击指示器可以快速切换到对应的图片。

<div class="slider-indicators">
  <span class="indicator active" data-index="0"></span>
  <span class="indicator" data-index="1"></span>
  <span class="indicator" data-index="2"></span>
</div>

.slider-indicators {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.indicator.active {
  background: #333;
}

const indicators = document.querySelectorAll('.indicator');

function updateIndicators() {
  indicators.forEach((indicator, index) => {
    indicator.classList.toggle('active', index === currentIndex);
  });
}

indicators.forEach(indicator => {
  indicator.addEventListener('click', () => {
    currentIndex = parseInt(indicator.getAttribute('data-index'));
    updateSlider();
    updateIndicators();
  });
});

prevBtn.addEventListener('click', updateIndicators);
nextBtn.addEventListener('click', updateIndicators);

优化过渡效果

通过CSS的transition属性优化图片切换的过渡效果。确保切换过程平滑自然。

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

响应式设计

通过媒体查询确保轮播图在不同设备上都能正常显示。调整容器宽度和高度以适应不同屏幕尺寸。

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