[分享]css做幻灯片效果

CSS是Web前端开发中非常重要的一个技术，它的应用范围非常广泛，其中包括制作幻灯片效果。接下来，我们将介绍如何使用CSS制作一个简单的幻灯片效果。/ CSS样式 / .slide { width: ...

CSS是Web前端开发中非常重要的一个技术，它的应用范围非常广泛，其中包括制作幻灯片效果。接下来，我们将介绍如何使用CSS制作一个简单的幻灯片效果。

/* CSS样式 */
.slide {
  width: 500px; /* 幻灯片的宽度 */
  height: 300px; /* 幻灯片的高度 */
  position: relative; /* 相对定位 */
  overflow: hidden; /* 溢出隐藏 */
}

.slide img {
  width: 100%; /* 图片宽度自适应 */
  height: 100%; /* 图片高度自适应 */
}

.slide ul {
  position: absolute; /* 绝对定位 */
  left: 0; /* 左侧对齐 */
  bottom: 0; /* 底部对齐 */
  width: 100%; /* 宽度100% */
  text-align: center; /* 文本居中 */
  z-index: 999; /* 层级最高 */
}

.slide li {
  display: inline-block; /* 内联块级元素 */
  margin: 0 5px; /* 边距 */
  width: 10px; /* 宽度 */
  height: 10px; /* 高度 */
  border-radius: 50%; /* 圆角 */
  background: #fff; /* 背景色 */
  cursor: pointer; /* 光标 */
}

.slide li.active {
  background: #999; /* 选中背景色 */
} 

接下来，我们需要在HTML中插入代码来实现幻灯片。

<!-- HTML代码 -->
<div class="slide">
  <img src="./img/1.jpg" alt="">
  <img src="./img/2.jpg" alt="">
  <img src="./img/3.jpg" alt="">
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
</div> 

最后，我们需要使用JavaScript来控制幻灯片的播放。

// JavaScript代码
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slide");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  setTimeout(showSlides, 3000); // 每3秒播放一次
} 

到这里，一个简单的CSS幻灯片效果就制作完成了。相信通过学习这个例子，读者们已经掌握了CSS做幻灯片的基本思路和技巧。