* {
margin:0;
padding:0;
}
body {
font-family:'微软雅黑';
}
.slideList {
margin:100px auto;
height:600px;
overflow:hidden;
max-width:1600px;
}
.slideList ul {
display:block;
position:relative;
margin:0px auto 30px;
overflow:hidden;
left:16px;
}
.slideList ul>li {
list-style:none;
float:left;
width:23%;
display:block;
text-align:center;
margin:0px 9px;
}
.slideList .itembox {
display:block;
}
.slideList .itembox {
position:relative;
}
.slideList .layer {
position:absolute;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
z-index:1;
top:0;
color:#fff;
display:none;
}
.slideList .layer > div {
position:absolute;
top:40%;
left:50%;
transform:translateY(-40%);
transform:translateX(-50%);
}
.slideList .layer > div p {
line-height:28px;
}
.slideList .layer > div span {
border-bottom:2px solid #fff;
width:30px;
display:block;
margin:5px auto;
}
.slideList ul>li img {
width:100%;
height:auto;
z-index:-999;
display:block;
}
.slideList .txt {
margin-top:20px;
}
.slideList .txt span {
color:#707070;
display:block;
margin-bottom:5px;
}
.slideList .lineBox {
position:absolute;
width:96%;
height:23px;
border:1px solid #9a9a9a;
background:#e4e4e4;
border-radius:50px;
z-index:-999;
margin:0 auto;
left:50%;
transform:translateX(-50%);
}
.slideList .line {
position:absolute;
width:23%;
height:14px;
border-radius:50px;
background-color:#9a9a9a;
left:10px;
z-index:999;
box-shadow:0 0 3px #666;
top:50%;
transform:translateY(-50%);
}
进度条滑动:jq文件中left值 , 可根据自定义宽度调整