javascript - 在 CSS slider 上添加自动播放

Question

我想向我的 css slider 添加自动播放功能，但不确定当前代码结构是否可行。

在评论中我给出了 codepan 的工作链接

谢谢这是CSS代码

Answer 1

使用间隔，您可以模拟对 radio 的点击...

var delay = 1500;
var sliderRadios = document.getElementsByName("carousel-3d");
var index=0
var imageCount = sliderRadios.length;

setInterval(function(){
  index++;
  if(index>imageCount-1){
    index=0;
  }
  sliderRadios[index].click();
  console.log(sliderRadios[index].id);
},delay);

.slider-container {
  position: relative;
  perspective: 350px;
  transform-style: preserve-3d;
}

.carousel-3d-item {
  position: absolute;
  top: 50%;
  left: 40%;
  outline: 1px solid transparent;
}

#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(3),
{
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(1) {
  transform: translateX(-175px) translateZ(-130px);
  opacity: .9;
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(3) {
  transform: translateX(0) translateZ(0);
  opacity: 1;
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}

.carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(2) {
  transform: translateX(175px) translateZ(-130px);
  opacity: .9;
  transition: all 1s cubic-bezier(.48, .16, .15, .98);
}

<div class="slider-container">
  <figure id="carousel--3d">
    <input type="radio" name="carousel-3d" id="carousel-3d-controller-1" />
    <input type="radio" name="carousel-3d" id="carousel-3d-controller-2" />
    <input type="radio" name="carousel-3d" id="carousel-3d-controller-3" />
    <label for="carousel-3d-controller-1" class="carousel-3d-item">
      <div class="slide-img">
        <img src="https://unsplash.it/400/250?image=974" alt="" />
      </div>
      <div class="slide-content">
        <img src="assets/dist/img/easy.png">
        <p>Win Discounts cccc</p>
      </div>
    </label>

    <label for="carousel-3d-controller-2" class="carousel-3d-item">
      <div class="slide-img">
        <img src="https://unsplash.it/400/250?image=974" alt="" />
      </div>
      <div class="slide-content">
        <img src="assets/dist/img/easy.png">
        <p>Win Discounts bbbb</p>
      </div>
    </label>

    <label for="carousel-3d-controller-3" class="carousel-3d-item">
      <div class="slide-img">
        <img src="https://unsplash.it/400/250?image=974" alt="" />
      </div>
      <div class="slide-content">
        <img src="assets/dist/img/easy.png">
        <p>Win Discounts aaaa</p>
      </div>
    </label>
  </figure>
</div>

您最好查看整个页面中的代码段(右上角的链接)。