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

2020-03-17 03:17:50 前端達人

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

這篇文章運用了複雜的CSS選擇器、flex box 和 Grid 佈局、 CSS checkbox 的偽類選擇器 checked 等技術

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

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

二、創建 HTML 結構

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

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

<code>

/<code>

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

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

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

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

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

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

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

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

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

<code>
  
    
      
        <figure>
          
        /<figure>
      

      
    

     

      
        <label>
      

      
        <label>
      

      
        <label>
      

    

    
      
        <label>
      

      
        <label>
      

      
        <label>
      

    

  

  
    
      <label>
         

        
          ...
        
      /<label>
    

    
  


/<code>

三、定義樣式

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

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

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

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

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

3、定義大圖列表樣式

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

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

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

4、定義小圓圈樣式

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

相應的CSS代碼如下所示：

<code>/*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;
}
/<code>

5、定義箭頭樣式

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

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

<code>/*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;
}
/<code>

6、定義縮略圖元素樣式

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

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

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

<code>.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;
}
/<code>

四、使用 Checkbox Hack 切換圖片

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

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

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

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

<code>/*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;
}
/<code>