如何使用按钮管理 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>