图片轮播效果图
做这种轮播图我们先要理解checked标签，label标签。
label:
标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。checked:checked 属性规定在页面加载时应该被预先选定的 input 元素。
checked 属性 与 或 配合使用。
checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。
首先我们先理清他的逻辑关系：
1：我们先建好div盒子用来放图片；
2采用checked标签来做选择事件。
html部分：
<div class="div1"></div>
<div class="div2></div>
这是盒子是用来放背景图片的。
建好div盒子的时，我们需要在CSS样式中将第一个DIV盒子里的图片显现，第二个div盒子给凸显出来。
.div1{
background:url(1.jpg);
background-size:1226px 460px;
opacity:1;
.div2{
background:url(2.jpg);
background-size:1226px 460px;
opacity:0;
这样我们上面整体的div盒子部分代码完成了，这个时候，我们需要做点击操作事件，我采用input来做原点。
<input type="radio" name="x" id="a" checked>
<label for="a" class="i"></label>
<input type="radio" name="x" id="b" checked>
<label for="b" class="i"></label>
写好原点的代码后，我们此时就需要把原点和div盒子给结合起来。
#a:checked~.div1{
opacity:1;
}
#b:checked~.div2{
opacity:1;
}
这是做轮播图的核心代码部分，做好之后，还需要用到position做定位，将原点的位置调整好。
网友评论