当前位置：首页 > JavaScript

js实现焦点轮播图

2026-01-30 16:06:16JavaScript

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

轮播图的核心逻辑是通过定时切换图片的显示状态，结合用户交互（如点击焦点按钮）实现手动切换。以下是基于原生JavaScript的实现方法。

js实现焦点轮播图

HTML结构

创建一个包含图片容器和焦点按钮的基础结构：

js实现焦点轮播图

<div class="slider">
  <div class="slider-container">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="indicator">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS样式

设置基本布局和过渡效果：

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}
.slider-container img.active {
  opacity: 1;
}
.indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}
.dot.active {
  background: white;
}

JavaScript逻辑

初始化变量

const container = document.querySelector('.slider-container');
const images = document.querySelectorAll('.slider-container img');
const dots = document.querySelectorAll('.dot');
let currentIndex = 0;
let timer = null;

图片切换函数

function showImage(index) {
  images.forEach(img => img.classList.remove('active'));
  dots.forEach(dot => dot.classList.remove('active'));

  images[index].classList.add('active');
  dots[index].classList.add('active');
  currentIndex = index;
}

自动轮播功能

function startAutoPlay() {
  timer = setInterval(() => {
    const nextIndex = (currentIndex + 1) % images.length;
    showImage(nextIndex);
  }, 3000);
}

function stopAutoPlay() {
  clearInterval(timer);
}

焦点按钮事件绑定

dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    stopAutoPlay();
    showImage(index);
    startAutoPlay();
  });
});

初始化轮播

showImage(0);
startAutoPlay();

// 鼠标悬停暂停
container.addEventListener('mouseenter', stopAutoPlay);
container.addEventListener('mouseleave', startAutoPlay);

完整代码示例

将所有代码整合后形成完整实现：

document.addEventListener('DOMContentLoaded', function() {
  const container = document.querySelector('.slider-container');
  const images = document.querySelectorAll('.slider-container img');
  const dots = document.querySelectorAll('.dot');
  let currentIndex = 0;
  let timer = null;

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

  function startAutoPlay() {
    timer = setInterval(() => {
      const nextIndex = (currentIndex + 1) % images.length;
      showImage(nextIndex);
    }, 3000);
  }

  function stopAutoPlay() {
    clearInterval(timer);
  }

  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      stopAutoPlay();
      showImage(index);
      startAutoPlay();
    });
  });

  showImage(0);
  startAutoPlay();

  container.addEventListener('mouseenter', stopAutoPlay);
  container.addEventListener('mouseleave', startAutoPlay);
});