Question

为什么我的滑块不起作用？我尝试了所有方法，但没有任何效果，我正在寻找代码中的错误所在。如何使它正常工作？

.img-container{
  border:2px solid black;
  padding:6px;
  width:1660px;
}

.crousel >img  {
margin:4px;
}
.crousel{
  border:4px solid magenta;
  width:517px;
  overflow:;
  display:flex;
}

#slide1:checked ~ .img-container .crousel .box{
  
 transform: translate(0px);
  transition: all 300ms ease;
}
#slide2:checked ~ .img-container .crousel .box{
  
 transform: translate(-500px);
  transition: all 300ms ease;
}
#slide3:checked ~ .img-container .crousel .box{
  
 transform: translate(-1000px);
  transition: all 300ms ease;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <div class="whole-slider">
    <input type="radio" id="slide1" name="img" checked>
     <input type="radio" id="slide2" name="img">
     <input type="radio" id="slide3" name="img">
    
    <div class="img-container">
      <div class="crousel">
        <label for="slide1"></label>
        <img src="https://cdn.pixabay.com/photo/2020/10/06/11/50/dog-5632005__340.jpg" alt="" class=".box">
        
        <label for="slide2"></label>
        <img src="https://cdn.pixabay.com/photo/2020/09/12/09/26/gorilla-5565295__340.jpg" alt="" class=".box">
        
        <label for="slide3"></label>
        <img src="https://cdn.pixabay.com/photo/2020/09/14/17/19/beach-5571545__340.jpg" alt="" class=".box">
      </div>
    </div>
    
  </div>
  
</body>
</html>

Answer 1

在html的img中，您写的是class=".box"而不是class="box"。

将img标记放在标签标记之间，因为它指向for。

此修改可以正常工作。

.img-container{
  border:2px solid black;
  padding:6px;
  width:1660px;
}

.crousel >img  {
margin:4px;
}
.crousel{
  border:4px solid magenta;
  width:517px;
  overflow:;
  display:flex;
}

#slide1:checked ~ .img-container .crousel .box{
  
 transform: translate(0px);
  transition: all 300ms ease;
}
#slide2:checked ~ .img-container .crousel .box{
  
 transform: translate(-500px);
  transition: all 300ms ease;
}
#slide3:checked ~ .img-container .crousel .box{
  
 transform: translate(-1000px);
  transition: all 300ms ease;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <div class="whole-slider">
    <input type="radio" id="slide1" name="img" checked>
     <input type="radio" id="slide2" name="img">
     <input type="radio" id="slide3" name="img">
    
    <div class="img-container">
      <div class="crousel">
        <label for="slide1">
        <img src="https://cdn.pixabay.com/photo/2020/10/06/11/50/dog-5632005__340.jpg" alt="" class="box">
        </label>
        <label for="slide2">
        <img src="https://cdn.pixabay.com/photo/2020/09/12/09/26/gorilla-5565295__340.jpg" alt="" class="box">
        </label>
        <label for="slide3"> <img src="https://cdn.pixabay.com/photo/2020/09/14/17/19/beach-5571545__340.jpg" alt="" class="box">
        </label>
        <img
      </div>
    </div>
    
  </div>
  
</body>
</html>

Answer 2

我已将img标签放在标签标签之间...
class =“。box”这是不对的。那将是class =“ box” ...

.img-container{
  border:2px solid black;
  padding:6px;
  width:1660px;
}

.crousel >img  {
margin:4px;
}
.crousel{
  border:4px solid magenta;
  width:517px;
  overflow:;
  display:flex;
}

#slide1:checked ~ .img-container .crousel .box{
  
 transform: translate(0px);
  transition: all 300ms ease;
}
#slide2:checked ~ .img-container .crousel .box{
  
 transform: translate(-500px);
  transition: all 300ms ease;
}
#slide3:checked ~ .img-container .crousel .box{
  
 transform: translate(-1000px);
  transition: all 300ms ease;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <div class="whole-slider">
    <input type="radio" id="slide1" name="img" checked>
     <input type="radio" id="slide2" name="img">
     <input type="radio" id="slide3" name="img">
    
    <div class="img-container">
      <div class="crousel">
        <label for="slide1">
        <img src="https://cdn.pixabay.com/photo/2020/10/06/11/50/dog-5632005__340.jpg" alt="" class="box">
        </label>
        <label for="slide2">
        <img src="https://cdn.pixabay.com/photo/2020/09/12/09/26/gorilla-5565295__340.jpg" alt="" class="box">
        </label>
        <label for="slide3"> <img src="https://cdn.pixabay.com/photo/2020/09/14/17/19/beach-5571545__340.jpg" alt="" class="box">
        </label>
        <img
      </div>
    </div>
    
  </div>
  
</body>
</html>

当我单击单选按钮时，为什么图像没有移动？

2 个答案: