* { 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值,进行切换显示