css幻灯片自动播放和手动播放

CSS幻灯片是网页设计中常见的一种展示方式，可以用来展示图片、文字等内容。一般来说，CSS幻灯片有两种播放方式，即自动播放和手动播放。

如果想要实现CSS幻灯片的自动播放，可以使用CSS的@keyframes和animation属性。下面是一个CSS3动画实现的自动播放幻灯片的示例代码：

.slider {
      width: 100%;
      height: 500px;
      position: relative;
      overflow: hidden;
}
.slider img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      animation: slide 5s infinite;
      animation-delay: 0s;
}
.slider img:first-child {
      opacity: 1;
      animation-delay: 0s;
}
.slider img:nth-child(2) {
      animation-delay: 5s;
}
.slider img:nth-child(3) {
      animation-delay: 10s;
}
@keyframes slide {
  0% {
        opacity: 0;
        transform: scale(1.1);
  }
  20% {
        opacity: 1;
        transform: scale(1);
  }
  80% {
        opacity: 1;
        transform: scale(1);
  }
  100% {
        opacity: 0;
        transform: scale(1.1);
  }
}
    

这个示例代码中，.slider是幻灯片的外层容器，.slider img是每一个幻灯片的容器。通过设置animation属性，可以实现幻灯片的自动播放。

除了自动播放之外，CSS幻灯片还可以实现手动播放。一般使用JavaScript来实现手动播放。下面是一个使用JavaScript实现手动播放幻灯片的示例代码：

var slideIndex = 0;
    showSlides();
function showSlides() {
      var i;
      var slides = document.getElementsByClassName("slide");
      for (i = 0;
     i  slides.length;
 i++) {
        slides[i].style.display = "none";
  }
      slideIndex++;
      if (slideIndex >
 slides.length) {
        slideIndex = 1;
  }
      slides[slideIndex - 1].style.display = "block";
      setTimeout(showSlides, 2000);
 // 切换时间为2秒}
    

这个示例代码中，使用一个showSlides函数来实现幻灯片的切换。通过设置setTimeout函数，可以实现幻灯片的自动播放，同时也可以通过手动操作来切换幻灯片。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！