该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
大家好！我是伯特-n0。
下面我给大家分享一下利用HTML中的标签 的checked选择器。制作点击按钮轮播图片的效果。
页面效果如下：
HTML布局：
首先一个div把四个标签包裹着，用type="text"属性把属性值改变成radio，标签就变成了一个单选框的样式；还要加一个name="ra"属性，而属性值并不是固定的，但是属性值必须一致，每个都要有name=""属性,而且name=""属性调动循环点击轮播，还有调动的高亮效果跟着点击的跳转；
在加最后一个标签后加一个div包裹着四张图片，而且第一个img上加上s1，在css样式上运用:checked 选择器匹配每个选中的元素；
然后在标签上加id；
在最外层div下再加一个div，div里面加四个标签，并且在标签上加for=""属性，而且for有聚焦作用，属性值添加时一定要注意跟标签上的id一一对应，否则该轮播无效；
HTML代码如下：(注意：有包裹着的皆为注释)
利用HTML中的标签的checked属性制作点击轮播！
标签样式是通过css的宽高边框得到的矩形，而矩形内的背景颜色是通过:hover伪，类鼠标移入改变背景颜色。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的 for 属性应当与相关元素的 id 属性相同。
接下来看看css样式吧！(注意：有包裹着的皆为注释)
@charset "utf-8";/* CSS Document */
*{
margin: 0;
padding: 0;
background-color: #fff;
}
.box{
margin-left: 35%;
width: 405px;
overflow: hidden;
}
.leftbox{
width: 1650px;
}
.buttn{
display: inline-block;
width: 400px;
height: 400px;
}
.buttn img{
width: 100%;
height: 100%;
}
.navigation{
margin-top: 10px;
width: 400px;
margin-left: 40%;
display: flex;/*/弹性布局，设置按钮位置/*/
}
.navigation label{/*边框颜色*/
border-color: #DC080C;
}
label{ /*/设置按钮属性/*/
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer; /*/把鼠标设置为手/*/
transition: 0.5s; /*/按钮背景变色时间/*/
}
label:hover {
background: #FFE32C;
}
/*设置margin让它向左轮播*//*:checked 选择器匹配每个选中的元素*//* ~ 兄弟元素选择器*/
#r1:checked~ .leftbox .s1 {
margin-left: 0;
transition: .5s; /*设置图片轮播过度的时间*/
}
#r2:checked~ .leftbox .s1 {
margin-left: -24.5%;
transition: .5s;
}
#r3:checked~ .leftbox .s1 {
margin-left: -48.9%;
transition: .5s;
}
#r4:checked~ .leftbox .s1 {
margin-left: -73.6%;
transition: .5s;
}
/*通过 :checked 关联整个轮播选择器匹配每个选中的元素*/
/*：checked 是伪类选择器，用来对应被选择的单选框或者复选框~ 是代表选择 checked 的后面的兄弟节点比如 有两个选项 每个选项有一个同级兄弟节点
总结：
利用HTML中的标签 的checked属性。制作点击按钮轮播图片的效果，要注意三点：
1.input标签type属性的属性值要注意改变为单选框的样式，还有name属性的属性值必须一致；
2.第一个img标签的类上必须还要加上一个“s1”或者其它来供:checked 选择器匹配；
3. 标签的for属性的属性值一定要跟标签上的id一一对应。标签当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上(不建议换其它标签)；
