* {
margin:0;
padding:0;
}
body {
padding:20px;
}
#wrap {
width:600px;
height:400px;
border:3px solid #000;
margin:0 auto;
/* padding:20px;
*/
position:relative;
/* 这里是重要点1,位置设定 */
overflow:hidden;
}
#picture {
/* border:2px solid #000;
*/
position:absolute;
/* 这里是重要点2,位置设定 */
width:4200px;
height:400px;
z-index:1;
}
#picture img {
width:600px;
height:400px;
/*border:2px solid #000;
*/
float:left;
/* 这里是重要点3,位置设定 */
/* display:none;
*/
}
#buttons {
position:absolute;
height:10px;
width:100px;
z-index:2;
left:250px;
/* background:red;
opacity:0.3;
*/
bottom:20px;
}
#buttons span {
width:10px;
height:10px;
border-radius:6px;
border:2px solid #fff;
float:left;
margin-left:5px;
cursor:pointer;
/* 这个地方以后注意兼容性 */
}
#buttons .on {
background:orange;
}
.arrow {
display:none;
width:50px;
height:50px;
position:absolute;
background-color:rgba(0,0,0,.3);
color:#fff;
z-index:2;
top:170px;
}
.arrow:hover {
background-color:rgba(0,0,0,.7);
}
#wrap:hover .arrow {
display:block;
}
#prev {
left:10px;
}
#next {
right:10px;
}
简单的轮播图设计,代码简单 容易移植