* {
margin:0;
padding:0;
list-style:none;
}
a {
text-decoration:none;
color:#666;
}
a:hover {
color:#1bc1a3;
}
body,hmtl {
background:#ecf0f1;
font-family:'Anton',sans-serif;
}
.wrap {
width:1200px;
height:100px;
margin:50px auto;
background:#fff;
border:1px solid #333;
overflow:hidden;
position:relative;
}
.wrap ul.slider {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
.wrap ul.slider > li {
float:left;
position:relative;
width:1200px;
height:100px;
}
.wrap ul.slider .show_date {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
}
.wrap .show_date li {
float:left;
line-height:100px;
padding:0px 68px;
font-size:20px;
}
.btn {
position:absolute;
top:50%;
width:50px;
height:60px;
line-height:60px;
text-align:center;
cursor:pointer;
background:rgba(0,0,0,0.1);
z-index:100;
transition:all 0.1s ease;
-webkit-transition:all 0.5s ease;
margin-top:-30px;
}
.btn:hover {
background:rgba(0,0,0,0.3);
}
#next {
right:-50px;
border-radius:7px 0px 0px 7px;
}
#prev {
left:-50px;
border-radius:0px 7px 7px 7px;
}
.wrap.active #next {
right:0px;
}
.wrap.active #prev {
left:0px;
}
1、鼠标移动到展示框,可以显示左右箭头,进行向左、向右选择;
2、 通过改变li的left值,进行切换显示