這是我上一次的面試題、一晃兩個月過去了。
從前都是拿原理騙人，把怎么實現的思路說出來。
我今天又被人問到了，才想起來真正碼出來。碼出來效果說明一切：
以上gif，只用到了5張圖片，一個html+css，沒有任何js。然后實現了自動輪播效果。
具體代碼如下：
結構布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css實現輪播圖</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="my-swiper"> <ul class="swiper-list"> <li class="swiper-slide swiper-slide1"> <a href="javascript:;"> <img src="./img/img01.jpg" alt=""> </a> </li> <li class="swiper-slide swiper-slide2"> <a href="javascript:;"> <img src="./img/img02.jpg" alt=""> </a> </li> <li class="swiper-slide swiper-slide3"> <a href="javascript:;"> <img src="./img/img03.jpg" alt=""> </a> </li> <li class="swiper-slide swiper-slide4"> <a href="javascript:;"> <img src="./img/img04.png" alt=""> </a> </li> <li class="swiper-slide swiper-slide5"> <a href="javascript:;"> <img src="./img/img05.gif" alt=""> </a> </li> </ul> <div class="pagination"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot active"></span> </div> </div> </body> </html>
除去普通布局樣式后的 css核心代碼:
.swiper-list { animation: swiper 10s steps(1, end) infinite; }
/* 橙色小圓點 */ .dot.active { animation: swiper-dot 10s steps(1, end) infinite; }
思路：
首先說五張圖片輪播
因為是五張圖片左浮動展示。所以只需要左移ul的left值即可。借助animation的關鍵幀，每隔2秒切換一下left的位置。0%和100%關鍵幀時重合，
加上animation-iteration-count: infinite；實現循環播放。
其次說小圓點自動切換位置：
我的思路是，五個小白點。第六個是橙色點。同樣借助animation關鍵幀，切換第六個橙色點的位置即可。
【趕工，制作比較粗糙，位置對的不太准。但是思路在這里。拋磚引玉，希望可以激發大家更多的實現想法。歡迎評論不足之處~】
源碼地址：
https://github.com/xingorg1/jsStudy/tree/master/css實現輪播圖
2019-04-17 21:10:07~