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

<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>

标签： javascriptcss

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>