.slidershow { width:700px; height:400px; overflow:hidden; } .middle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .navigation { position:absolute; bottom:20px; left:50%; transform:translate(-50%); display:flex; } .bar { width:50px; height:10px; border:2px solid #fff; margin:6px; cursor:pointer; /*设置光标*/ transition:0.4s; } .bar:hover { background:#fff; } input[name="r"] { position:absolute; visibility:hidden; /*设置元素是不可见的。*/ } .slides { width:500%; height:100%; display:flex; } .slide { width:20%; transition:0.6s; } .slide img { width:100%; height:100%; } #rl:checked ~ .s1 { margin-left:0; } #r2:checked ~ .s1 { margin-left:-20%; } #r3:checked ~ .s1 { margin-left:-40%; } #r4:checked ~ .s1 { margin-left:-60%; } #r5:checked ~ .s1 { margin-left:-80%; }
更新时间:2020-02-27 00:06:28
图片切换bug属于网页bug,实际没有,点击即可