当我单击单选按钮时，为什么图像没有移动? [英] When I am clicking radio buttons why images are not moving?
本文介绍了当我单击单选按钮时，为什么图像没有移动?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为什么我的滑块不起作用?我已经尝试了所有方法，但没有任何效果，我正在寻找代码中的错误所在.我该如何使其正常工作?
Why my slider is not working? I have tried all but nothing works, I am looking to find where the mistakes are in the code. How can I make it to work?
.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>推荐答案
在html的img中，您写的是 class =".box""而不是 class ="框" .
In your html, in your img, you wrote class=".box" instead of class="box".
并将 img 标签放在标签标签之间，因为它指向 for .
And put img tag between label tag because it is pointing to 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>这篇关于当我单击单选按钮时，为什么图像没有移动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
