* {
margin:0;
padding:0;
list-style:none;
}
/* */
.slider {
height:300px;
width:500px;
margin:100px auto;
position:relative;
}
.slider .fade li {
position:absolute;
display:none;
}
.slider .fade li:first-child {
display:block;
}
.arrow {
display:none;
}
.slider:hover .arrow {
display:block;
}
.arrow-left,.arrow-right {
font-family:"SimSun","宋体";
width:30px;
height:60px;
background-color:rgba(0,0,0,0.1);
position:absolute;
top:50%;
margin-top:-30px;
cursor:pointer;
text-align:center;
line-height:60px;
color:#fff;
font-weight:700;
font-size:30px;
}
.arrow-left:hover,.arrow-right:hover {
background-color:rgba(0,0,0,.5);
}
.arrow-left {
left:0;
}
.arrow-right {
right:0;
}
.slider .pagination {
position:absolute;
bottom:10px;
left:50%;
margin-left:-68px
}
.slider .pagination ul li {
font-size:8px;
line-height:16px;
float:left;
margin-right:5px;
width:16px;
height:16px;
border-radius:50%;
background-color:gray;
text-align:center;
cursor:pointer
}
.slider .pagination ul li.active {
background-color:red;
}
左右箭头用字体图标,快速点击就不会出现局部蓝方块了