----------------------------------------------------------------------------------------------------------------------------------------------
<
>
--------------------------------------------------------------------------------------------------------------------------------
*{
margin:0;
padding:0;
text-decoration:none;
}
body{
padding:20px;
}
#container{
position:relative;
width:600px;
height:400px;
border:3pxsolid#333;
overflow:hidden;
}
#list{
position:absolute;
z-index:1;
width:4200px;
height:400px;
}
#listimg{
float:left;
width:600px;
height:400px;
}
#buttons{
position:absolute;
left:250px;
bottom:20px;
z-index:2;
height:10px;
width:100px;
}
#buttonsspan{
float:left;
margin-right:5px;
width:10px;
height:10px;
border:1pxsolid#fff;
border-radius:50%;
background:#333;
cursor:pointer;
}
#buttons.on{
background:orangered;
}
.arrow{
position:absolute;
top:180px;
z-index:2;
display:none;
width:40px;
height:40px;
font-size:36px;
font-weight:bold;
line-height:39px;
text-align:center;
color:#fff;
background-color:rgba(0,0,0,.3);
cursor:pointer;
}
.arrow:hover{
background-color:rgba(0,0,0,.7);
}
#container:hover.arrow{
display:block;
}
#prev{
left:20px;
}
#next{
right:20px;
}
分 -->
|
