大家好，今天我們將一起學習下如何從零開始創建一個具有縮略圖功能的響應式圖片幻燈。這個案例我們無需編寫任何 JavaScript 代碼，這裏主要運用了 CSS checkbox hack 的技術進行實現。

這個案例除了運用 CSS checkbox hack 技術之外，還運用了複雜的CSS選擇器、以及 flex box 和 Grid 佈局的相關特性。

一、首先看看幻燈的效果展示

如視頻所示，一個功能還算完備的漂亮圖片幻燈組件。

二、創建 HTML 結構

1、首先我們準備3張圖片素材。

2、接下來我們新建3個radio按鈕，通過name屬性進行關聯分組。

<input type="radio" id="image1" name="image" checked>
<input type="radio" id="image2" name="image">
<input type="radio" id="image3" name="image">

3、然後我們創建 .featured-wrapper 和 .thumb-list 兩個容器，放置內容元素。

3.1、.featured-wrapper 元素包含3個列表：

1、一個大圖列表，一次只能顯示一個圖片

2、一組箭頭列表，用於大圖切換

3、一組圓圈列表，用於大圖切換

這裏我們使用label標籤技巧與radio表單進行對應代替JS點擊事件，同一個 radio 可以關聯多個與之對應的 label 標籤。

3.2、.thumb-list 容器包含一組圖片縮略圖，與大圖對應，用於切換大圖。

總而言之，我們說了這麼多，我們可以通過箭頭、圈圈、縮略圖進行幻燈大圖的切換，整體的 HTML 結構如下圖所示：

基於上圖所示，最終完成的 HTML 代碼結構如下：

<div class="container">
  <div class="featured-wrapper">
    <ul class="featured-list">
      <li>
        <figure>
          <img src="IMG_SRC" alt="">
        </figure>
      </li>
      <!-- other two list items here -->
    </ul>
    <ul class="arrows">
      <li>
        <label for="image1"></label>
      </li>
      <li>
        <label for="image2"></label>
      </li>
      <li>
        <label for="image3"></label>
      </li>
    </ul>
    <ul class="dots">
      <li>
        <label for="image1"></label>
      </li>
      <li>
        <label for="image2"></label>
      </li>
      <li>
        <label for="image3"></label>
      </li>
    </ul>
  </div>
  <ul class="thumb-list">
    <li>
      <label for="image1">
        <img src="IMG_SRC" alt="">
        <span class="outer">
          <span class="inner">...</span>
        </span>
      </label>
    </li>
    <!-- other two list items here -->
  </ul>
</div>

三、定義樣式

1、將 radio 按鈕移除至屏幕外，示例代碼如下:

input[type="radio"] {
  position: absolute;
  bottom: 0;
  left: -9999px;
}

這裏你會注意到，我使用了bottom: 0，主要爲了防止每次點擊標籤時，瀏覽器跳至頁面頂部。雖然不是最佳實踐，但是這個方法對本案例有效，還有一個更好的做法，我們可以設置display: none，但是不符合鍵盤可訪問性（accessibility）的標準，這裏還是推薦 bottom: 0;

2、定義最外層 container 容器的樣式，設置最大寬度以及讓其水平居中

.container {
  max-width: 450px;
  padding: 0 20px;
  margin: 0 auto;
}

3、定義大圖列表樣式

爲了只顯示一張大圖，其他圖片將會被蓋住並且隱藏，你可能最先想到的是改變文檔正常流，使用position屬性進行定位的方法進行隱藏，這裏你需要注意圖片的寬高比，通常使用固定高度的解決方案，在這個案例中，我們使用CSS的Grid新佈局，將圖片放置在1行1列的單元網格中，示例如下圖所示：

與上圖對應的CSS代碼如下：

.featured-wrapper .featured-list {
  display: grid;
}
 
.featured-wrapper .featured-list li {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transition: opacity 0.25s;
}

4、定義小圓圈樣式

我們需要將小圓圈定位在 .featured-wrapper 容器底部，點擊相應圓圈進行切換大圖：

相應的CSS代碼如下所示：

/*CUSTOM VARIABLES HERE*/
 
.featured-wrapper {
  position: relative;
}
 
.featured-wrapper .dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
 
.featured-wrapper .dots li:not(:last-child) {
  margin-right: 8px;
}
 
.featured-wrapper .dots label {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--white);
  transition: background 0.25s;
}
 
.featured-wrapper .dots label:hover {
  background: currentColor;
}

5、定義箭頭樣式

接下來我們繼續定義箭頭切換的樣式，我們將其放置在.featured-wrapper容器，如下圖所示：

這裏需要注意的是，這些箭頭與 radio 按鈕一一對應關聯，這裏我們用到了::before 和 ::after僞元素創建圓形元素，示例代碼如下：

/*CUSTOM VARIABLES HERE*/
 
.featured-wrapper .arrows label::before,
.featured-wrapper .arrows label::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--black);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-color: var(--white);
  opacity: 0.5;
  transition: opacity 0.25s;
}
 
.featured-wrapper .arrows label::before {
  left: 10px;
}
 
.featured-wrapper .arrows label::after {
  right: 10px;
}

6、定義縮略圖元素樣式

每個縮略圖佔據父容器的三分之一，如下圖所示：

在這裏，爲了將圖片標題放置在圖片之上，我們用的不是傳統的CSS定位，這裏我們應用了CSS Grid技巧。

我們將每個縮略圖變成單一網格（一行一列），並使用grid水平垂直居中的技巧 place-items: center 讓文本垂直居中，相關代碼如下所示：

.thumb-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  margin-top: 20px;
}
 
.thumb-list label {
  display: grid;
}
 
.thumb-list img,
.thumb-list .outer {
  grid-column: 1;
  grid-row: 1;
}
 
.thumb-list .outer {
  display: grid;
  place-items: center;
  transition: background 0.25s;
}
 
.thumb-list .inner {
  font-size: 18px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.25s;
}

四、使用 Checkbox Hack 切換圖片

接下來是本案例的核心，也是最有趣的地方，我們使用 checkbox hack 的技術模擬JS的點擊事件。

每次點擊縮略圖，相應的箭頭和圓圈都會處於活動狀態：

相應的幻燈片大圖可見
對應的圓圈背景變成白色
縮略圖對應的文字標題將會顯示
箭頭導航將會更新對應相關上個圖片/ 下個圖片的鏈接

基於以上需求最終完成的CSS代碼如下：

/*CUSTOM VARIABLES HERE*/
 
[id="image1"]:checked ~ .container .featured-list li:nth-child(1),
[id="image2"]:checked ~ .container .featured-list li:nth-child(2),
[id="image3"]:checked ~ .container .featured-list li:nth-child(3),
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::before,
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::after {
  opacity: 1;
}
 
[id="image1"]:checked ~ .container .arrows [for="image3"]::before,
[id="image2"]:checked ~ .container .arrows [for="image1"]::before,
[id="image3"]:checked ~ .container .arrows [for="image2"]::before {
  content: ’’; 
  background-image: url(arrow-prev-slideshow.svg);
}
 
[id="image1"]:checked ~ .container .arrows [for="image2"]::after,
[id="image2"]:checked ~ .container .arrows [for="image3"]::after,
[id="image3"]:checked ~ .container .arrows [for="image1"]::after {
  content: ’’; 
  background-image: url(arrow-next-slideshow.svg);
}
 
[id="image1"]:checked ~ .container .dots [for="image1"],
[id="image2"]:checked ~ .container .dots [for="image2"],
[id="image3"]:checked ~ .container .dots [for="image3"] {
  background: currentColor;
}
 
[id="image1"]:checked ~ .container [for="image1"] .outer,
[id="image2"]:checked ~ .container [for="image2"] .outer,
[id="image3"]:checked ~ .container [for="image3"] .outer {
  background: var(--overlay);
}
 
[id="image1"]:checked ~ .container [for="image1"] .inner,
[id="image2"]:checked ~ .container [for="image2"] .inner,
[id="image3"]:checked ~ .container [for="image3"] .inner {
  opacity: 1;
  transform: none;
}

五、源碼及效果展示

最終的效果體驗，大家可以點擊原文鏈接進行體驗，由於文章篇幅有限，完整的源碼大家可以點擊下方鏈接進行獲取。

鏈接：https://pan.baidu.com/s/1K0Y5xbziOe1l9hYVxrjVUg

密碼：u28s

小節

到此我們完成了本案例，通過本案例，我相信你對 CSS checkbox hack 技術有了更清楚的認識，希望你能夠適應這項技術，並將其運用到自己的項目中。

文章來源：
作者：George Martsoukos
網站：tutsplus
非直譯

延伸閱讀

使用 Vanilla JavaScript 框架創建一個簡單的天氣應用

動手練一練，使用 Flexbox 創建一個響應式的表單

動手練一練，用純 CSS 製作一款側滑顯示留言面板的網頁組件

使用 CSS Checkbox Hack 技術純手工擼一個手風琴組件

動手練一練，做一個響應式的後臺管理面板

專注分享當下最實用的前端技術。關注前端達人，與達人一起學習進步！

長按關注"前端達人"

動手練一練，用 CSS Checkbox Hack 技術製作一個響應式圖片幻燈

一、首先看看幻燈的效果展示

三、定義樣式

四、使用 Checkbox Hack 切換圖片

五、源碼及效果展示

小節

延伸閱讀

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

那些不常見，但卻非常實用的 css 屬性

【架構師必備技能】前端工程化之“腳手架”

動手練一練，純手工碼一個不一樣的待辦事項（TODO LIST）

9個很棒的CSS邊框技巧

10+個很酷的VueJS組件，模板和實驗示例

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

動手練一練，用 CSS Checkbox Hack 技術製作一個響應式圖片幻燈

一、 首先看看幻燈的效果展示

三、定義樣式

四、使用 Checkbox Hack 切換圖片

五、源碼及效果展示

小節

延伸閱讀

一、首先看看幻燈的效果展示