css幻灯片自动播放效果

CSS幻灯片自动播放效果：

html {
      font-size: 16px;
}
.slider {
      position: relative;
      width: 100%;
      height: 500px;
      overflow: hidden;
}
.slider__container {
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
}
.slider__item {
      flex-shrink: 0;
      width: 100%;
}
.slider__item-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
}
.slider__dots {
      position: absolute;
      display: flex;
      bottom: 15px;
      left: 50%;
      transform: translate(-50%);
}
.slider__dot {
      flex-shrink: 0;
      width: 10px;
      height: 10px;
      margin: 0 5px;
      border-radius: 50%;
      background-color: #ccc;
      cursor: pointer;
}
.slider__dot--active {
      background-color: #000;
}
/* 自动播放 */.slider__container {
      animation: slide 8s infinite linear;
}
@keyframes slide {
  0% {
        transform: translate(0, 0);
  }
  100% {
        transform: translate(calc(-100% / 3 * 2), 0);
 /* 3个幻灯片，每播放完一个幻灯片，容器向左移动1/3 */  }
}
    

上述代码实现了一个具有自动播放效果的CSS幻灯片，通过设置container的animation属性，让三张幻灯片循环播放。其中，animation的duration属性设置为8秒，每移动完一个幻灯片时容器向左移动1/3。用户也可通过鼠标移入slider区域、点击dots等交互方式停止自动播放。

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