<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>王三少制作</title>
<style type="text/css">
.photo{
width:650px;
height:430px;
position:relative;
margin:auto;
}
.photo input{
display:none;
}
.image{
position:absolute;
width:650px;
height:430px;
transform:scale(0);
opacity:0;
transition:all 0.7s ease-in-out;
}
.image img{
width:100%;
height:100%;
}
.nav label{
width:150px;
height:100%;
position:absolute;
z-index:10;
opacity:0;
display:none;
cursor:pointer;
transition:opacity 0.2s;
color:#FFF;
font-size:100px;
line-height:430px;
text-align:center;
background:rgba(255,255.255,0.5);
text-shadow:0 0 15px rgb(50,50,50);
}
.image:hover + .nav label{
opacity:0.5;
}
.nav label:hover{
opacity:1;
}
.nav .down{
right:0;
}
input:checked + .control .image{
opacity:1;
transform:scale(1);
transition:all 1s ease-in out;
}
input:checked + .control .nav label{
display:block;
}
.dots{
width:100%;
height:10px;
position:absolute;
bottom:10px;
text-align:center;
}
.dot{
width:10px;
height:10px;
margin:0 5px;
border-radius:50%;
position:relative;
display:inline-block;
top:5px;
background-color:rgba(255,255,255,0.8);
}
input#img1:checked ~ .dots label#dot1,
input#img2:checked ~ .dots label#dot2,
input#img3:checked ~ .dots label#dot3{
background:rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div class="photo">
<input type="radio" name="bt" id="img1" checked />
<div class="control">
<div class="image"><img src="images/img1.png" /></div> <!--图片1地址-->
<div class="nav">
<label for="img3" class="up"><</label>
<label for="img2" class="down">></label>
</div>
</div>
<input type="radio" name="bt" id="img2" checked />
<div class="control">
<div class="image"><img src="images/img2.png" /></div> <!--图片2地址-->
<div class="nav">
<label for="img1" class="up"><</label>
<label for="img3" class="down">></label>
</div>
</div>
<input type="radio" name="bt" id="img3" checked />
<div class="control">
<div class="image"><img src="images/img3.png" /></div> <!--图片3地址-->
<div class="nav">
<label for="img2" class="up"><</label>
<label for="img1" class="down">></label>
</div>
</div>
<div class="dots">
<label for="img1" class="dot" id="dot1"></label>
<label for="img2" class="dot" id="dot2"></label>
<label for="img3" class="dot" id="dot3"></label>
</div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/wjss/p/8836255.html