如何使用按钮管理 CSS 轮播？

Question

我正在尝试制作一个图像轮播，它可以自行滑动，但也可以通过箭头按钮控制。我添加了控制滑块滑动动画的关键帧，但对于按钮，我不知道从哪里开始。有什么方法可以使用javascript将此功能添加到按钮吗？

.carousel {

  overflow: hidden;

}

.carousel figure {

  position: relative;

  width: 600vw;

  animation: 35s slider infinite;

  display: table;

  margin-block-start: 0;

  margin-block-end: 0;

  margin-inline-start: 0;

  margin-inline-end: 0;

}

.carousel figure img {

  width: 100vw;

}

@keyframes slider {

  0% {

    left: 0vw;

  }

  14% {

    left: 0vw;

  }

  15% {

    left: -100vw;

  }

  29% {

    left: -100vw;

  }

  30% {

    left: -200vw;

  }

  44% {

    left: -200vw;

  }

  45% {

    left: -300vw;

  }

  59% {

    left: -300vw;

  }

  60% {

    left: -400vw;

  }

  74% {

    left: -400vw;

  }

  75% {

    left: -500vw;

  }

  90% {

    left: -500vw;

  }

  100% {

    left: 0vw;

  }

}

.main_carousel_right_arrow {

  font-size: 2vw;

  padding: 5vw 2vw;

  background-color: rgb(255, 255, 255);

  top: 6%;

  position: absolute;

  right: 0px;

  border-top-left-radius: 5px;

  border-bottom-left-radius: 5px;

}

.main_carousel_left_arrow {

  font-size: 2vw;

  padding: 5vw 2vw;

  background-color: rgb(255, 255, 255);

  top: 6%;

  position: absolute;

  left: 0px;

  border-top-right-radius: 5px;

  border-bottom-right-radius: 5px;

}

Answer 1

您的滑块的问题是完整的动画周期 = 1 次迭代，这意味着 和back按钮forward不能与此滑块一起使用，就像默认情况下一样。我删除了你的@keyframes算法，将其替换为setInterval().滑块完全用 JavaScript 编写。还可以添加transition: 1s以.carousel figure实现平滑的幻灯片过渡。在上一个任务中，我建议您display: table在选择器中使用.carousel figure。现在您需要将其替换为display: flex.let anime = document.querySelector('.carousel figure');let left = document.querySelector('.main_carousel_left_arrow');let right = document.querySelector('.main_carousel_right_arrow');var step = 0;function animate() {  if (step > -600) {      anime.style.transform = 'translateX('+ step +'vw)';    } else {      anime.style.transform = 'transformX(100vw)';      step = 100;  }}setInterval(function () {   step = step - 100;   animate();}, 7000);right.onclick = function() {  step = step - 100;  animate(); }left.onclick = function() {  step = step + 100;  animate();}.carousel {  overflow: hidden;}.carousel figure {  position: relative;  width: 600vw;  transition: 1s;  display: flex;  margin: 0;}.carousel figure img {  width: 100vw;}.main_carousel_right_arrow {  font-size: 2vw;  padding: 5vw 2vw;  background-color: rgb(255, 255, 255);  top: 6%;  position: absolute;  right: 0px;  border-top-left-radius: 5px;  border-bottom-left-radius: 5px;}.main_carousel_left_arrow {  font-size: 2vw;  padding: 5vw 2vw;  background-color: rgb(255, 255, 255);  top: 6%;  position: absolute;  left: 0px;  border-top-right-radius: 5px;  border-bottom-right-radius: 5px;}<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css"><div class="carousel">  <figure>    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/a341a61df77a5715.jpg?q=50"></a>    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/971922653b729a9e.jpg?q=50"></a>    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/4075d3bac7ced1e9.jpg?q=50"></a>    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/411e38f49c1486b4.jpg?q=50"></a>    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/8c30d1a38636e9fa.jpg?q=50"></a>    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/ce435d49852d2b8c.jpg?q=50"></a>  </figure>  <div>    <span class="main_carousel_left_arrow"><i class="fas fa-arrow-left"></i></span>    <span class="main_carousel_right_arrow"><i class="fas fa-arrow-right"></i></span>  </div></div>