使用纯CSS实现图片轮播效果
首先我们来看一下所实现轮播图的最终效果：
接下来为html+css代码部分：
以下为HTML代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/banner.css">
</head>
<body>
<div class="banner">
<input type="radio" id="put1" name="put" hidden>
<input type="radio" id="put2" name="put" hidden>
<input type="radio" id="put3" name="put" hidden>
<ul>
<li><img src="img/first.png"></li>
<li><img src="img/second.png"></li>
<li><img src="img/third.png"></li>
</ul>
<div class="circle">
<label for="put1"></label>
<label for="put2"></label>
<label for="put3"></label>
</div>
<div class="left_arrow">
<label for="put1"></label>
<label for="put2"></label>
<label for="put3"></label>
</div>
<div class="right_arrow">
<label for="put1"></label>
<label for="put2"></label>
<label for="put3"></label>
</div>
</div>
</body>
</html>
以下为CSS代码部分：
*{
margin:0;
padding:0;
}
.banner{
position:relative;
width:300px;
height:300px;
margin:50px auto;
border:5px solid lightcoral;
overflow:hidden;
}
.banner ul{
width:900px;
padding:0;
transition:all 1s;
}
.banner li{
list-style:none;
width:300px;
height:300px;
float:left;
}
.circle{
position:absolute;
bottom:10px;
left:92px;
}
.circle label{
display:inline-block;
width:20px;
height:20px;
border-radius:50%;
background:lightcoral;
margin:0 10px;
position:relative;
cursor:pointer;
}
.circle label::after{
content:'';
width:30px;
height:30px;
background:lightsalmon;
border-radius:50%;
position:absolute;
top:-5px;
left:-5px;
opacity:0;
}
#put1:checked~.circle label:first-of-type::after,
#put2:checked~.circle label:nth-of-type(2)::after,
#put3:checked~.circle label:nth-of-type(3)::after{
opacity:1;
}
#put1:checked~ul{
margin-left:0;
}
#put2:checked~ul{
margin-left:-300px;
}
#put3:checked~ul{
margin-left:-600px;
}
.left_arrow label{
display:inline-block;
width:24px;
height:44px;
top:50%;
left:0%;
margin-top:-22px;
position: absolute;
}
/* 圆点的put1,put2,put3和箭头的put1,put2,put3是相互联系的，同时受input制约 */
#put1:checked~.left_arrow label:nth-of-type(3),
#put2:checked~.left_arrow label:nth-of-type(1),
#put3:checked~.left_arrow label:nth-of-type(2){
margin-left:20px;
cursor:pointer;
background:url(../img/ban_prev.png) no-repeat center center;
}
.right_arrow label{
display:inline-block;
width:24px;
height:44px;
top:50%;
right:0%;
margin-top:-22px;
position: absolute;
}
#put1:checked~.right_arrow label:nth-of-type(2),
#put2:checked~.right_arrow label:nth-of-type(3),
#put3:checked~.right_arrow label:nth-of-type(1){
margin-right:20px;
cursor:pointer;
background:url(../img/ban_next.png) no-repeat center center;
}
以下为我所使用的图片素材文件，有需要可自取（均为png格式）：
keep learning
转载请注明来源
