@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
font-family:微软雅黑;
font-size:24px;
}
/*框*/
.div01 {
width:500px;
height:300px;
position:absolute;
overflow:hidden;
}
/*照片框*/
.div02 {
width:calc(500px*8);
height:300px;
position:absolute;
z-index:5;
}
.slideimg {
display:none;
}
.cimg {
display:block;
}
/*左右键*/
.abt {
display:block;
width:30px;
height:60px;
z-index:9;
opacity:0.3;
line-height:60px;
text-align:center;
background-color:gray;
color:white;
}
#lefta {
position:absolute;
left:0px;
top:40%;
}
#righta {
position:absolute;
right:0px;
top:40%;
}
.abt:hover {
opacity:0.6;
cursor:pointer;
}
/**/
#slideblock {
padding:3px 3px;
z-index:20;
border-radius:8px;
position:absolute;
left:25%;
bottom:20px;
width:213px;
height:12px;
background-color:#eaeaea;
opacity:0.8;
}
#slideblock ol {
list-style:none;
float:left;
width:12px;
height:12px;
margin-left:13px;
border-radius:100%;
background-color:white;
}
#slideblock ol.selected {
background-color:red;
}
思路:当前图片display为block,其他图片display为none;设计类选择器.cimg { display:block;},设计.slideimg { display:none; },所有图片都要.slideimg,只有的当前要显示的图片有.cimg