使用 javascript 自动播放滑块

Question

我要求制作一个自动播放滑块，但在学习了 javascript 之后...我仍然不知道如何应用我所学到的知识...需要一些帮助..

我被要求制作一个自动播放滑块，每 5 秒更换一次幻灯片......

我用输入构建了滑块，在中间显示了检查的输入，但不知道如何使其与 js 一起工作..

我想用javascript做什么：当检查“输入”时=>等待5秒并检查下一个输入等等....

我还需要能够在单击滑块 / 时停止自动播放，并能够使用键盘的箭头切换幻灯片......

这是我的 HTML

<section id="slider">
    <input type="radio" name="slider" id="s1">
    <input type="radio" name="slider" id="s2">
    <input type="radio" name="slider" id="s3" checked>
    <input type="radio" name="slider" id="s4">
    <input type="radio" name="slider" id="s5">
    <label for="s1" id="slide1">Slide 1</label>
    <label for="s2" id="slide2">Slide 2</label>
    <label for="s3" id="slide3">Slide 3</label>
    <label for="s4" id="slide4">Slide 4</label>
    <label for="s5" id="slide5">Slide 5</label>

Here's my CSS 

* {
}

body {
box-sizing: border-box;
margin: 0 auto;
}

input[type=radio] {
  display: none;
}

#slider {
  margin-top: 10px;
  height: 300px;
  width: auto;
  position: relative;
  perspective: 40rem;
  transform-style: preserve-3d;
}

#slider label {
  margin: auto;
  width: 40%;
  height: 400px;
  border-radius: 10px;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.9s ease;
}
/* far left*/
#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
  box-shadow: 0 5px 8px 0 rgba(0,0,0,.37);
  transform: translate3d(-65%,0,-200px) rotateY(10deg);
}
/* left */
#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
  box-shadow: 0 12px 15px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(-25%,0,-100px) rotateY(10deg);
}
/* middle */
#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
  box-shadow: 0px 30px 80px -9px rgba(0,0,0,0.5), 0 11px 7px 0 rgba(0,0,0,.19);
  transform: translate3d(0,0,0);
}
/* right */
#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
  box-shadow: 0 12px 15px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(25%,0,-100px) rotateY(-10deg);
}
/* far right */
#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
  box-shadow: 0 5px 8px 0 rgba(0,0,0,.37);
  transform: translate3d(65%,0,-200px) rotateY(-10deg);
}

/*slide content*/
#slide1 { background: #00bcd4 }
#slide2 { background: #4caf50 }
#slide3 { background: #6a4caf }
#slide4 { background: #ffc107 }
#slide5 { background: #ff5722 }

#slide1, #slide2, #slide3, #slide4, #slide5 {
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 1

检查 w3 幻灯片https://www.w3schools.com/w3css/w3css_slideshow.asp 这可能对你有帮助。