利用纯CSS制作轮播图

图片轮播效果图

做这种轮播图我们先要理解checked标签，label标签。

label:

标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。checked:checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性 与 或 配合使用。

checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

首先我们先理清他的逻辑关系：

1：我们先建好div盒子用来放图片；

2采用checked标签来做选择事件。

html部分：

这是盒子是用来放背景图片的。

建好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来做原点。

写好原点的代码后，我们此时就需要把原点和div盒子给结合起来。

#a:checked~.div1{

opacity:1;

}

#b:checked~.div2{

opacity:1;

}

这是做轮播图的核心代码部分，做好之后，还需要用到position做定位，将原点的位置调整好。