当前位置：首页 > JavaScript

js实现焦点轮播图

2026-04-04 07:47:39JavaScript

实现焦点轮播图的核心思路

通过JavaScript控制图片的切换，结合定时器和事件监听实现自动轮播与手动切换功能。核心包括DOM操作、定时器管理、动画效果和事件绑定。

HTML结构

基础的HTML结构需包含轮播容器、图片列表及焦点指示器：

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg" class="slider-item active">
    <img src="image2.jpg" class="slider-item">
    <img src="image3.jpg" class="slider-item">
  </div>
  <div class="slider-dots">
    <span class="dot active" data-index="0"></span>
    <span class="dot" data-index="1"></span>
    <span class="dot" data-index="2"></span>
  </div>
</div>

CSS样式

确保轮播项横向排列并隐藏非活动项：

.slider-container {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 400px;
}
.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}
.slider-item {
  min-width: 100%;
  opacity: 0;
  position: absolute;
}
.slider-item.active {
  opacity: 1;
}
.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 5px;
  cursor: pointer;
}
.dot.active {
  background: #333;
}

JavaScript实现

初始化变量

获取DOM元素并设置初始状态：

const sliderWrapper = document.querySelector('.slider-wrapper');
const sliderItems = document.querySelectorAll('.slider-item');
const dots = document.querySelectorAll('.dot');
let currentIndex = 0;
let timer = null;
const interval = 3000;

自动轮播功能

通过定时器实现自动切换：

function startAutoPlay() {
  timer = setInterval(() => {
    nextSlide();
  }, interval);
}

function stopAutoPlay() {
  clearInterval(timer);
}

切换逻辑

处理图片切换和焦点更新：

function goToSlide(index) {
  sliderItems[currentIndex].classList.remove('active');
  dots[currentIndex].classList.remove('active');

  currentIndex = (index + sliderItems.length) % sliderItems.length;

  sliderItems[currentIndex].classList.add('active');
  dots[currentIndex].classList.add('active');
}

function nextSlide() {
  goToSlide(currentIndex + 1);
}

function prevSlide() {
  goToSlide(currentIndex - 1);
}

事件绑定

为指示器和容器添加交互事件：

dots.forEach(dot => {
  dot.addEventListener('click', function() {
    const dotIndex = parseInt(this.getAttribute('data-index'));
    goToSlide(dotIndex);
  });
});

sliderWrapper.addEventListener('mouseenter', stopAutoPlay);
sliderWrapper.addEventListener('mouseleave', startAutoPlay);

初始化启动

页面加载后开始轮播：

window.addEventListener('DOMContentLoaded', () => {
  startAutoPlay();
});

完整代码示例

将所有部分组合后的完整实现：

js实现焦点轮播图

document.addEventListener('DOMContentLoaded', function() {
  const sliderWrapper = document.querySelector('.slider-wrapper');
  const sliderItems = document.querySelectorAll('.slider-item');
  const dots = document.querySelectorAll('.dot');
  let currentIndex = 0;
  let timer = null;
  const interval = 3000;

  function updateSlide() {
    sliderItems.forEach((item, index) => {
      item.classList.toggle('active', index === currentIndex);
    });
    dots.forEach((dot, index) => {
      dot.classList.toggle('active', index === currentIndex);
    });
  }

  function goToSlide(index) {
    currentIndex = (index + sliderItems.length) % sliderItems.length;
    updateSlide();
  }

  function startAutoPlay() {
    timer = setInterval(() => goToSlide(currentIndex + 1), interval);
  }

  function stopAutoPlay() {
    clearInterval(timer);
  }

  dots.forEach(dot => {
    dot.addEventListener('click', () => {
      const dotIndex = parseInt(dot.getAttribute('data-index'));
      goToSlide(dotIndex);
    });
  });

  sliderWrapper.addEventListener('mouseenter', stopAutoPlay);
  sliderWrapper.addEventListener('mouseleave', startAutoPlay);

  startAutoPlay();
});