Question

我想在我的css滑块中添加一个自动播放功能，但不确定它是否可以使用当前的代码结构。

评论我给出了我的代码扩展工作链接

由于这是css代码

Answer 1

我不确定如何使用CSS完成此操作，但使用JavaScript非常容易。

let selected = 0;
const buttons = document.querySelectorAll('input');
setInterval(() => {
  buttons[(selected++) % buttons.length].click();
}, 1000);

这适用于您的简单示例，但您可能需要更大的应用程序更具体的选择器，请参阅document.querySelector。

Answer 2

使用间隔，您可以模拟无线电的点击次数......

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

您最好查看完整页面中的代码段（右上角的链接）。

在CSS滑块上添加自动播放

2 个答案: