张三：李四，我最近在做一个大学综合门户的项目，想加入一个幻灯片展示的功能，你有什么建议吗？

李四：当然可以。幻灯片系统在大学门户中非常常见，比如用于课程介绍、活动宣传等。我们可以用HTML、CSS和JavaScript来实现。

张三：那具体怎么开始呢？是不是需要一个轮播图的结构？

李四：是的，首先我们需要一个容器来存放图片，然后通过CSS设置样式，再用JavaScript控制切换。

张三：听起来不错。那代码应该怎么写呢？

李四：我们先从HTML结构开始。你可以创建一个div作为幻灯片容器，里面包含多个img标签，每个img代表一张幻灯片。

张三：好的，那HTML代码大概是这样的：

<div class="slideshow">
  <img src="image1.jpg" alt="Slide 1">
  <img src="image2.jpg" alt="Slide 2">
  <img src="image3.jpg" alt="Slide 3">
</div>
    

李四：对，这样结构就出来了。接下来是CSS部分，我们要让这些图片只显示一张，并且自动切换。

张三：那CSS该怎么写呢？

李四：我们可以用flex布局，把所有图片都隐藏，只显示当前的一张。同时设置过渡效果，让切换更平滑。

张三：那CSS代码应该是这样的：

.slideshow {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow img.active {
  opacity: 1;
}
    

李四：很好！现在我们有了基本的结构和样式，接下来就是JavaScript部分了。

张三：那JavaScript要怎么处理呢？

李四：我们可以用setInterval来定时切换图片。每次切换时，先移除上一张的active类，再给下一张加上。

张三：那代码大概是什么样的？

李四：如下所示：

const slides = document.querySelectorAll('.slideshow img');
let currentIndex = 0;

function showNextSlide() {
  slides[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % slides.length;
  slides[currentIndex].classList.add('active');
}

// 初始显示第一张
slides[0].classList.add('active');

// 每3秒切换一次
setInterval(showNextSlide, 3000);
    

张三：这样就实现了自动轮播的功能。不过如果用户想手动切换怎么办？

李四：这是一个好问题。我们可以添加左右按钮，让用户点击切换。

张三：那HTML部分是不是要加两个按钮？

李四：是的，比如这样：

<div class="slideshow">
  <button id="prevBtn"><<</button>
  <img src="image1.jpg" alt="Slide 1">
  <img src="image2.jpg" alt="Slide 2">
  <img src="image3.jpg" alt="Slide 3">
  <button id="nextBtn">>></button>
</div>
    

张三：那JavaScript怎么处理按钮点击事件呢？

李四：我们可以为这两个按钮绑定事件监听器，点击时调用相应的函数来切换幻灯片。

张三：那代码应该这样写：

const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

prevBtn.addEventListener('click', () => {
  showPrevSlide();
});

nextBtn.addEventListener('click', () => {
  showNextSlide();
});

function showPrevSlide() {
  slides[currentIndex].classList.remove('active');
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  slides[currentIndex].classList.add('active');
}
    

张三：这样就能实现手动切换了。那有没有办法让用户通过点击小圆点来选择幻灯片？

李四：当然可以。我们可以动态生成导航点，每个点对应一张幻灯片。

张三：那HTML部分是不是需要一个额外的div来放置导航点？

李四：是的，我们可以这样写：

<div class="slideshow">
  <button id="prevBtn"><<</button>
  <div class="slides-container">
    <img src="image1.jpg" alt="Slide 1">
    <img src="image2.jpg" alt="Slide 2">
    <img src="image3.jpg" alt="Slide 3">
  </div>
  <div class="dots-container">
    <span class="dot active" data-index="0"></span>
    <span class="dot" data-index="1"></span>
    <span class="dot" data-index="2"></span>
  </div>
  <button id="nextBtn">>></button>
</div>
    

张三：那CSS部分需要调整一下，让导航点看起来像圆点。

李四：没错，可以这样设置：

.dots-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #007bff;
}
    

张三：那JavaScript部分呢？如何绑定点击事件？

李四：我们可以遍历所有的dot元素，为它们添加点击事件，根据data-index来切换幻灯片。

张三：那代码大致是这样的：

const dots = document.querySelectorAll('.dot');

dots.forEach(dot => {
  dot.addEventListener('click', () => {
    const index = parseInt(dot.getAttribute('data-index'));
    if (index !== currentIndex) {
      slides[currentIndex].classList.remove('active');
      currentIndex = index;
      slides[currentIndex].classList.add('active');
    }
  });
});
    

张三：这样就完成了所有功能。现在这个幻灯片系统已经很完整了。

李四：是的，现在它支持自动轮播、手动切换和点击导航点切换。如果还需要更多功能，比如淡入淡出动画或者响应式设计，我们也可以继续扩展。

张三：那响应式设计怎么做？

李四：我们可以使用媒体查询，根据屏幕宽度调整幻灯片的大小和布局。

张三：那CSS里加一段媒体查询就可以了吗？

李四：是的，比如这样：

@media (max-width: 768px) {
  .slideshow {
    height: 200px;
  }

  .dot {
    width: 8px;
    height: 8px;
  }
}
    

张三：明白了。那整个项目就可以部署到大学门户系统中了。

李四：没错。最后，我们还可以考虑将幻灯片系统封装成一个独立的组件，方便后续复用和维护。

张三：谢谢你的指导，我现在对这个项目更有信心了。

李四：不客气，有任何问题随时问我。