tab面板 ... ...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab面板</title>
<style>
*{
margin:0;
padding:0;
}
.tab{
width:/*盛放你的圖片需要的寬度*/
overflow:hidden;
position:relative;
box-shadow:0 0 5px #888888;
}
ul{
overflow:hidden;
width:400%;/*所有圖片的總寬度*/
transition:0.2s linear;
}
li{
float:left;
width:/*圖片寬度自己設置*/
list-style:none;
}
img{
display:block;/*去除隱藏行距*/
width:100%;
}
input{
width:20px;
height:20px;
cursor:pointer;/*手型*/
position:absolute;
right:10px;
bottom:10px;
/*隱藏占位*/
visibility:hiddden;
z-index:200;
}
label{
width:20px;
height:20px;
cursor:pointer;/*手型*/
position:absolute;
right:10px;
bottom:10px;
/*隱藏占位*/
visibility:hiddden;
z-index:200;
text-align:center;
background-color:white;
}
/*位置的調整移動*/
.tab input:nth-of-type(4),label:nth-of-type{
transform:translateX(-30px);
}
.tab input:nth-of-type(3),label:nth-of-type{
transform:translateX(-60px);
}
.tab input:nth-of-type(2),label:nth-of-type{
transform:translateX(-90px);
}
.tab input:nth-of-type(1),label:nth-of-type{
transform:translateX(-120px);
}
.tab input:nth-of-type(1):checked ~ label:nth-of-type(1){
background-color:black;
color:white;
transform：translateX(-120px) scale(1.3);
opacity:0.5;
}
.tab input:nth-of-type(2):checked ~ label:nth-of-type(2){
background-color:black;
color:white;
transform：translateX(-90px) scale(1.3);
opacity:0.5;
}
.tab input:nth-of-type(3):checked ~ label:nth-of-type(3){
background-color:black;
color:white;
transform：translateX(-60 px) scale(1.3);
opacity:0.5;
}
.tab input:nth-of-type(4):checked ~ label:nth-of-type(4){
background-color:black;
color:white;
transform：translateX(-30px) scale(1.3);
opacity:0.5;
}
.tab input:nth-of-type(5):checked ~ label:nth-of-type(5){
background-color:black;
color:white;
transform：scale(1.3);
opacity:0.5;
}
/*圖片的移動*/
.tab input:nth-of-type(1):checked ~ ul{
transform：translateX(0px);
}
.tab input:nth-of-type(2):checked ~ ul{
transform：translateX(-600px)
}
.tab input:nth-of-type(3):checked ~ ul{
transform：translateX(-1200px) ;
}
.tab input:nth-of-type(4):checked ~ ul{
transform：translateX(-1800px) ;
}
.tab input:nth-of-type(5):checked ~ ul{
transform：translateX(-2400px);
}
</style>
</head>
<body>
<div class="tab">
<input type="radio" id="r1" name="1" checked>
<input type="radio" id="r2" name="1" >
<input type="radio" id="r3" name="1">
<input type="radio" id="r4" name="1">
<label for="r1">1</label>
<label for="r2">2</label>
<label for="r3">3</label>
<label for="r4">4</label>
<ul>
<li><img src="" alt="">
<li><img src="" alt="">
<li><img src="" alt="'>
<li><img src="" alt="">
</ul>
</body>
</html>
