* { 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值 , 可根据自定义宽度调整