js实现焦点轮播图

实现焦点轮播图的基本思路

轮播图的核心是通过定时切换图片，并同步更新焦点指示器（小圆点）的状态。需要处理自动轮播、手动切换（点击小圆点或左右箭头）以及鼠标悬停暂停等功能。

HTML 结构

创建一个包含图片列表、焦点指示器和导航箭头的容器：

<div class="slider">
  <div class="slider-container">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </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>
  <button class="slider-prev">&lt;</button>
  <button class="slider-next">&gt;</button>
</div>

CSS 样式

设置轮播图的基础样式，隐藏非活动图片：

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s;
}
.slider-container img.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: rgba(255,255,255,0.5);
  margin: 0 5px;
  cursor: pointer;
}
.dot.active {
  background: white;
}
.slider-prev, .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}
.slider-prev { left: 10px; }
.slider-next { right: 10px; }

JavaScript 实现

class Slider {
  constructor(selector) {
    this.slider = document.querySelector(selector);
    this.container = this.slider.querySelector('.slider-container');
    this.images = this.container.querySelectorAll('img');
    this.dots = this.slider.querySelectorAll('.dot');
    this.prevBtn = this.slider.querySelector('.slider-prev');
    this.nextBtn = this.slider.querySelector('.slider-next');
    this.currentIndex = 0;
    this.timer = null;
    this.interval = 3000;

    this.init();
  }

  init() {
    this.startAutoPlay();
    this.bindEvents();
  }

  bindEvents() {
    this.prevBtn.addEventListener('click', () => this.prev());
    this.nextBtn.addEventListener('click', () => this.next());

    this.dots.forEach(dot => {
      dot.addEventListener('click', () => {
        this.goTo(parseInt(dot.dataset.index));
      });
    });

    this.slider.addEventListener('mouseenter', () => this.stopAutoPlay());
    this.slider.addEventListener('mouseleave', () => this.startAutoPlay());
  }

  startAutoPlay() {
    this.timer = setInterval(() => this.next(), this.interval);
  }

  stopAutoPlay() {
    clearInterval(this.timer);
  }

  update() {
    this.images.forEach(img => img.classList.remove('active'));
    this.dots.forEach(dot => dot.classList.remove('active'));

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

  next() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
    this.update();
  }

  prev() {
    this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    this.update();
  }

  goTo(index) {
    this.currentIndex = index;
    this.update();
  }
}

// 初始化轮播图
new Slider('.slider');

功能扩展建议

1. 添加动画效果：可以使用CSS transition或animation实现更丰富的切换效果。
2. 响应式设计：通过监听窗口大小变化调整轮播图尺寸。
3. 无限循环：克隆首尾图片实现无缝滚动效果。
4. 触摸支持：添加touch事件处理实现移动端滑动切换。

注意事项

1. 图片预加载：确保所有图片加载完成后再开始轮播。
2. 性能优化：避免频繁的DOM操作，可以使用requestAnimationFrame优化动画。
3. 可访问性：为导航元素添加ARIA属性，增强屏幕阅读器支持。