当前位置：首页 > JavaScript

轮播图实现js

2026-02-02 22:42:01JavaScript

轮播图的基本实现原理

轮播图的核心是通过定时切换图片或内容，通常结合CSS动画和JavaScript控制。基本思路是创建一个可视窗口，内部放置可滑动的图片列表，通过改变列表位置实现切换效果。

HTML结构搭建

基础HTML结构需要包含轮播容器、图片列表及导航控件：

<div class="slider-container">
  <div class="slider-track">
    <div class="slide">图片1</div>
    <div class="slide">图片2</div>
    <div class="slide">图片3</div>
  </div>
  <button class="prev-btn">上一张</button>
  <button class="next-btn">下一张</button>
  <div class="nav-dots"></div>
</div>

CSS样式设置

通过CSS设置布局和过渡效果：

轮播图实现js

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

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

.slide {
  min-width: 100%;
  height: 100%;
}

JavaScript核心逻辑

实现自动轮播和手动控制功能：

const track = document.querySelector('.slider-track');
const slides = Array.from(document.querySelectorAll('.slide'));
const nextBtn = document.querySelector('.next-btn');
const prevBtn = document.querySelector('.prev-btn');

let currentIndex = 0;
const slideWidth = slides[0].getBoundingClientRect().width;

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

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlider();
});

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  updateSlider();
});

// 自动轮播
let interval = setInterval(() => {
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlider();
}, 3000);

// 鼠标悬停暂停
track.addEventListener('mouseenter', () => clearInterval(interval));
track.addEventListener('mouseleave', () => {
  interval = setInterval(() => {
    currentIndex = (currentIndex + 1) % slides.length;
    updateSlider();
  }, 3000);
});

添加导航圆点

实现点击圆点跳转功能：

轮播图实现js

const dotsContainer = document.querySelector('.nav-dots');

// 创建导航圆点
slides.forEach((_, index) => {
  const dot = document.createElement('span');
  dot.classList.add('dot');
  if(index === 0) dot.classList.add('active');
  dot.addEventListener('click', () => {
    currentIndex = index;
    updateSlider();
    updateDots();
  });
  dotsContainer.appendChild(dot);
});

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

无限循环优化

修改滑动逻辑实现无缝循环：

// 在HTML中复制首尾图片
// 修改updateSlider函数
function updateSlider() {
  if(currentIndex >= slides.length) {
    currentIndex = 0;
    track.style.transition = 'none';
    track.style.transform = `translateX(0)`;
    setTimeout(() => {
      track.style.transition = 'transform 0.5s ease';
      currentIndex = 1;
      updateSlider();
    }, 50);
    return;
  }
  track.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}

触摸屏支持

添加触摸事件处理：

let startX, moveX;

track.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  clearInterval(interval);
});

track.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].clientX;
  const diff = moveX - startX;
  track.style.transform = `translateX(calc(-${currentIndex * slideWidth}px + ${diff}px))`;
});

track.addEventListener('touchend', () => {
  const threshold = slideWidth / 4;
  const diff = moveX - startX;

  if(diff > threshold) {
    currentIndex = Math.max(0, currentIndex - 1);
  } else if(-diff > threshold) {
    currentIndex = Math.min(slides.length - 1, currentIndex + 1);
  }

  updateSlider();
  interval = setInterval(autoSlide, 3000);
});