幻灯片，使用 HTML、CSS 和 JS 不起作用？卡在第一张幻灯片上不动

Question

此代码是我正在制作自己的网站的学校项目的一部分。我必须在里面放一个幻灯片。然而，每当我尝试创建幻灯片时，它永远不会奏效。这是我得到的最接近的。我从视频中找到了这段代码，我发誓我完全复制了它，但我不知道为什么它卡在第一页上。它不会移动到下一张幻灯片或任何内容。请尝试帮助我，我将不胜感激。谢谢

**this is the css**

  
  margin: 0;
  padding: 0;
  height: 100vh;
  justify-content: center;
  align-items:center;
}

.slider{
  width:800px;
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

.slides{
  width:500%;
  height:500px;
  display:flex;
}

.slides input{
display:none;
}

.slide{
  width:20%;
  transition:2s;
}

.slide img{
  width: 800px;
  height: 500px;
}

/*css for manual slide navigation*/

.navigation-manual{
position:absolute;
width:800px;
margin-top:-40px;
display:flex;
justify-content: center;
}



.manual-btn{
  border: 2px solid #009999;
  padding:5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}


.manual-btn:not(:last-child){
  margin-right: 40px;
}

.manual-btn:hover{
  background:  #009999;
}

#radio1:checked ~.first{
  margin left: 0;
}

#radio2:checked ~.first{
  margin left: -20%;
}

#radio3:checked ~.first{
  margin left: -40%;
}

#radio4:checked ~.first{
  margin left: -60%;
}


/*css for automatic navigation*/

.navigation-auto{
  position: absolute;
  display: flex;
  width: 800px;
  justify-content: center;
  margin-top: 460px;
}

.navigation-auto div{
border: 2px solid #009999;
padding:5px;
border-radius: 10px;
transition: 1s;
}

.navigation-auto div:not(:last-child){
  margin-right: 40px;
}

#radio1:checked~.navigation-auto. auto-btn1{ background: #009999;}

#radio2:checked~.navigation-auto. auto-btn2{ background:#009999;}

#radio3:checked~.navigation-auto. auto-btn3{ background: #009999;}

#radio4:checked~.navigation-auto. auto-btn4{ background: #009999;}

<!--image slider start-->
<div class="slider">
  <div class="slides">
    <!--radio buttons start-->
    <input type="radio" name="radio-btn"  id="radio1">
    <input type="radio" name="radio-btn" id="radio2">
    <input type="radio" name="radio-btn" id="radio3">
    <input type="radio" name="radio-btn" id="radio4">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide first" >
  <img src="images/recnatble.jpeg" alt="">
  </div>
<div class="slide">
  <img src="images/road.jpg" alt="">
</div>
<div class="slide">
  <img src="images/pretty bridge.jpg" alt="">
</div>
<div class="slide">
  <img src="images/building 1 ss.jpg" alt="">
</div>
<!--slide images end-->
<!--automatic navigation start-->
<div class="navigation-auto">
  <div class="auto-btn1"></div>
  <div class="auto-btn2"></div>
  <div class="auto-btn3"></div>
  <div class="auto-btn4"></div>
  </div>
<!--automatic navigation end-->
</div>
<!--manual navigation start-->
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>

<!--image slider end-->
<script type="text/javascript">
  var counter=1;
  setInterval(function(){
    document.getElementById('radio' + counter).checked=true;
    counter++;
    if (counter > 4){
      counter=1;
    }
  },5000);
</script>

Answer 1

这是您问题的解决方案。我添加了一个函数 showSlides 来显示幻灯片。

您的 checkboxes 不是显示的那些。它的 auto-btns。

    var counter=1;
  setInterval(function(){
    counter++;
    if (counter > 4){
      counter=1;
    }
    showSlides(counter);
  },5000);

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slide");
  var dots = document.getElementsByClassName('auto-btn');

  for (i = 0; i < dots.length; i++) {
      dots[i].style.background = "transparent";
  }

  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  dots[n-1].style.background = "#009999";
  slides[n-1].style.display = "block";
}

    margin: 0;
padding: 0;
height: 100vh;
justify-content: center;
align-items:center;
}

.slider{
width:800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
}

.slides{
width:500%;
height:500px;
display:flex;
}

.slides input{
display:none;
}

.slide{
width:20%;
transition:2s;
}

.slide img{
width: 800px;
height: 500px;
}

/*css for manual slide navigation*/

.navigation-manual{
position:absolute;
width:800px;
margin-top:-40px;
display:flex;
justify-content: center;
}



.manual-btn{
border: 2px solid #009999;
padding:5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}


.manual-btn:not(:last-child){
margin-right: 40px;
}

.manual-btn:hover{
background:  #009999;
}

#radio1:checked ~.first{
margin left: 0;
}

#radio2:checked ~.first{
margin left: -20%;
}

#radio3:checked ~.first{
margin left: -40%;
}

#radio4:checked ~.first{
margin left: -60%;
}


/*css for automatic navigation*/

.navigation-auto{
position: absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}

.navigation-auto div{
border: 2px solid #009999;
padding:5px;
border-radius: 10px;
transition: 1s;
}

.navigation-auto div:not(:last-child){
margin-right: 40px;
}

.auto-btn1 {
    background: #009999;
}

#radio1:checked~.navigation-auto. auto-btn1{ background: #009999;}

#radio2:checked~.navigation-auto. auto-btn2{ background:#009999;}

#radio3:checked~.navigation-auto. auto-btn3{ background: #009999;}

#radio4:checked~.navigation-auto. auto-btn4{ background: #009999;}

<div class="slider">
<div class="slides">
<!--radio buttons start-->
<input type="radio" name="radio-btn"  id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide first" >
<img src="https://placekitten.com/200/300" alt="">
</div>
<div class="slide">
<img src="https://placekitten.com/g/200/300" alt="">
</div>
<div class="slide">
<img src="https://placekitten.com/200/300" alt="">
</div>
<div class="slide">
<img src="https://placekitten.com/g/200/300" alt="">
</div>
<!--slide images end-->
<!--automatic navigation start-->
<div class="navigation-auto">
<div class="auto-btn auto-btn1"></div>
<div class="auto-btn auto-btn2"></div>
<div class="auto-btn auto-btn3"></div>
<div class="auto-btn auto-btn4"></div>
</div>
<!--automatic navigation end-->
</div>
<!--manual navigation start-->
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>

Answer 2

您的代码不包含任何可滑动或执行的内容，只需将以下内容作为参考并查看脚本如何在 . Check out

var counter = 0;

var image = ['https://wowslider.com/sliders/demo-18/data1/images/hongkong1081704.jpg','http://wowslider.com/sliders/demo-18/data1/images/shanghai.jpg','https://jssors8.azureedge.net/demos/image-slider/img/px-beach-daylight-fun-1430675-image.jpg','https://jssors8.azureedge.net/demos/image-slider/img/faded-monaco-scenery-evening-dark-picjumbo-com-image.jpg'];
setInterval(function(){
  counter++;
  document.getElementById('slider_img').src = image[counter];
  if (counter == image.length){
    counter=0;
  }
},3000);

margin: 0;
padding: 0;
height: 100vh;
justify-content: center;
align-items:center;
}

.slider{
width:800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
}

.slides{
width:500%;
height:500px;
display:flex;
}

.slides input{
display:none;
}

.slide{
width:20%;
transition:2s;
}

.slide img{
width: 800px;
height: 500px;
}

/*css for manual slide navigation*/

.navigation-manual{
position:absolute;
width:800px;
margin-top:-40px;
display:flex;
justify-content: center;
}



.manual-btn{
border: 2px solid #009999;
padding:5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}


.manual-btn:not(:last-child){
margin-right: 40px;
}

.manual-btn:hover{
background:  #009999;
}

#radio1:checked ~.first{
margin left: 0;
}

#radio2:checked ~.first{
margin left: -20%;
}

#radio3:checked ~.first{
margin left: -40%;
}

#radio4:checked ~.first{
margin left: -60%;
}


/*css for automatic navigation*/

.navigation-auto{
position: absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}

.navigation-auto div{
border: 2px solid #009999;
padding:5px;
border-radius: 10px;
transition: 1s;
}

.navigation-auto div:not(:last-child){
margin-right: 40px;
}

#radio1:checked~.navigation-auto. auto-btn1{ background: #009999;}

#radio2:checked~.navigation-auto. auto-btn2{ background:#009999;}

#radio3:checked~.navigation-auto. auto-btn3{ background: #009999;}

#radio4:checked~.navigation-auto. auto-btn4{ background: #009999;}

<div class="slider">
<div class="slides">
  <!--radio buttons start-->

<!--radio buttons end-->
<!--slide images start-->
<div class="slide first" >
<img src="https://wowslider.com/sliders/demo-18/data1/images/hongkong1081704.jpg" alt="" id="slider_img">
</div>
<!--slide images end-->
<!--automatic navigation start-->

<!--automatic navigation end-->
</div>
<!--manual navigation start-->


<!--image slider end-->