純CSS可以實現輪播圖,這是因為CSS具有動畫效果,同時也可以利用復選框的選中狀態來觸發動畫。
<div class="slider"> <input type="checkbox" id="slide-1" name="slide"> <input type="checkbox" id="slide-2" name="slide"> <input type="checkbox" id="slide-3" name="slide"> <div class="slides"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <div class="controls"> <label for="slide-1"></label> <label for="slide-2"></label> <label for="slide-3"></label> </div> </div>
以上是輪播圖的基本結構,用多個復選框和標簽來實現。接下來需要利用CSS實現動畫效果。
.slider { position: relative; overflow: hidden; } .slides { display: flex; transition: transform 0.5s ease; } .slide { flex: 1; width: 100%; height: 100%; } #slide-1:checked ~ .slides { transform: translateX(0%); } #slide-2:checked ~ .slides { transform: translateX(-100%); } #slide-3:checked ~ .slides { transform: translateX(-200%); } .controls { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; } .controls label { cursor: pointer; margin: 0 10px; width: 10px; height: 10px; border-radius: 50%; background-color: #ccc; } #slide-1:checked ~ .controls label:nth-child(1), #slide-2:checked ~ .controls label:nth-child(2), #slide-3:checked ~ .controls label:nth-child(3) { background-color: #000; }
以上是CSS的代碼部分,其中利用了CSS的flex布局和transform屬性實現了輪播和控制按鈕樣式的修改。此外,利用了:checked偽類實現了復選框的選中狀態來實現輪播圖的動畫效果。