* { margin:0; padding:0; box-sizing:border-box; } ul { list-style:none; } a { text-decoration:none; } .content { width:500px; height:300px; margin:0 auto; margin-top:30px; overflow:hidden; position:relative; border-radius:6px; } .content>.mian { position:absolute; height:100%; } .content>.mian::after { content:""; clear:both; display:block; } .content>.mian>.imgas { width:500px; height:100%; float:left; transition:all 0.15s linear; } .upper,.lower { position:absolute; font-size:2rem; color:#fff; top:50%; width:40px; height:60px; text-align:center; line-height:55px; margin-top:-30px; background-color:rgba(0,188,212,0.3); transition:all 0.15s ease-in-out; cursor:pointer; user-select:none; } .upper:hover,.lower:hover { filter:-shadow(0 0 2px pink); } .upper { left:0; } .lower { right:0; } .start { padding:5px; position:absolute; top:0; right:0; color:#000; display:flex; justify-content:space-between; align-items:center; background-color:rgba(61,255,135,0.3); cursor:pointer; user-select:none; } .slides { position:absolute; right:2%; bottom:1%; display:flex; } .slides>li { width:15px; height:15px; background-color:palegreen; border-radius:50%; transition:all 0.25s linear; } .slides>li+li { margin-left:10px; } .slidesActive { background-color:plum !important; transform:scale(1.2); }
更新时间:2021-01-04 22:13:11
无缝轮播 jq+css+html