css3 - 純css實現一個輪播圖

時間 2019-11-06

標籤 css3 css 實現一個欄目 CSS 简体版

原文原文鏈接

這是我上一次的面試題、一晃兩個月過去了。javascript

從前都是拿原理騙人，把怎麼實現的思路說出來。css

我今天又被人問到了，纔想起來真正碼出來。碼出來效果說明一切：html

以上gif，只用到了5張圖片，一個html+css，沒有任何js。而後實現了自動輪播效果。java

具體代碼以下：
結構佈局git

<!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核心代碼:github

.swiper-list {
  animation: swiper 10s steps(1, end) infinite;
}

/* 橙色小圓點 */
.dot.active {
  animation: swiper-dot 10s steps(1, end) infinite;
}

思路：面試

首先說五張圖片輪播ide

由於是五張圖片左浮動展現。因此只須要左移ul的left值便可。藉助animation的關鍵幀，每隔2秒切換一下left的位置。0%和100%關鍵幀時重合，佈局

加上animation-iteration-count: infinite；實現循環播放。ui

其次說小圓點自動切換位置：
個人思路是，五個小白點。第六個是橙色點。一樣藉助animation關鍵幀，切換第六個橙色點的位置便可。

【趕工，製做比較粗糙，位置對的不太準。可是思路在這裏。拋磚引玉，但願能夠激發你們更多的實現想法。歡迎評論不足之處~】

源碼地址：

https://github.com/xingorg1/jsStudy/tree/master/css實現輪播圖

2019-04-17 21:10:07~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。