15. 轮播与图片画廊：索引、边界和自动播放

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

轮播一定要处理第一张和最后一张的边界。
自动播放要记得可停止，离开页面也应清理。
缩略图 / 圆点本质是跳转到指定索引。

四、练习建议

增加鼠标悬停暂停自动播放。
把文本替换成真实图片地址。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/15-carousel-gallery.js，下面同步展示，方便学习和复制。

// 页面 15：轮播图逻辑
const slides = [
  { title: 'Outdoor Decking', desc: '户外地板应用场景' },
  { title: 'Fluted Wall Panel', desc: '竖纹墙板背景墙' },
  { title: 'Garden Fencing', desc: '花园围栏与隐私空间' }
];

let currentIndex = 0;
let autoplayId = null;
const stage = document.querySelector('#p15-stage');
const dots = document.querySelector('#p15-dots');

function getSafeIndex(index) {
  if (index < 0) return slides.length - 1;
  if (index >= slides.length) return 0;
  return index;
}

function renderSlide() {
  const slide = slides[currentIndex];
  stage.innerHTML = `
    <h3>${slide.title}</h3>
    <p>${slide.desc}</p>
    <span class="tag">${currentIndex + 1} / ${slides.length}</span>
  `;

  dots.innerHTML = slides.map((_, index) => `
    <button class="secondary ${index === currentIndex ? 'active' : ''}" data-index="${index}">${index + 1}</button>
  `).join('');
}

function goTo(index) {
  currentIndex = getSafeIndex(index);
  renderSlide();
}

function toggleAutoplay() {
  if (autoplayId) {
    clearInterval(autoplayId);
    autoplayId = null;
    return;
  }

  autoplayId = setInterval(() => goTo(currentIndex + 1), 1500);
}

document.querySelector('#p15-prev').addEventListener('click', () => goTo(currentIndex - 1));
document.querySelector('#p15-next').addEventListener('click', () => goTo(currentIndex + 1));
document.querySelector('#p15-auto').addEventListener('click', toggleAutoplay);
dots.addEventListener('click', (event) => {
  const button = event.target.closest('button[data-index]');
  if (button) goTo(Number(button.dataset.index));
});
renderSlide();