---
# System prepended metadata

title: 時代雜誌(切版筆記)(輪播)

---


# 時代雜誌(切版筆記)(輪播)
##  **這次實做主要是運用CSS選擇器 ~ 來操作, 所以需要搭配特定的HTML結構**

![](https://i.imgur.com/Pjp1z9n.gif)


**Html結構**

![](https://i.imgur.com/16Ned2D.png)

 1. 使用input type="radio", 四個input radio中的屬性name記得要一樣才會配判定為同一組, 每一個radio的id屬性則對應到 label中的for屬性作綁定, 意思是點擊到label會匹配到對應的input 

 2. HTML 結構讓 input radio 寫在前面 再用選擇器 ~ 來選擇後面的元素 e.x. input[type="radio"]:checked ~ .slide

 3. 將li 合併成橫向排列
```
      .slide:nth-of-type(1) { left: 0; }
    
      .slide:nth-of-type(2) { left: 100%; }
      
      .slide:nth-of-type(3) { left: 200%; }
      
      .slide:nth-of-type(4) { left: 300%; }
```
 4. 選擇第n個radio被checked時, 位移相對應的數值 
```
 input[type="radio"]:nth-of-type(1) ~ .slide{
   transform:translatex(0%);
 }
 input[type="radio"]:nth-of-type(2) ~ .slide{
   transform:translatex(-100%);
 }
 input[type="radio"]:nth-of-type(3) ~ .slide{
   transform:translatex(-200%);
 }
 input[type="radio"]:nth-of-type(4) ~ .slide{
   transform:translatex(-300%);
 }
```
 5. 除了控制輪播內容外, 第n個radio被checked後, 繼續利用選擇器 ~ 來選擇control-visible內的label, 改變其樣式
```
  input[type="radio"]:nth-of-type(1):checked ~ .control-visible label:nth-of-type(1) {
    background-color: #000;
  }
```
 
   *p.s. 選擇器太長了show一個就好*

 6. 最後在 .slide 加上過場效果, 並將radio隱藏(display:none;)。
`transition: .5s transform ease-in-out;`
   
[作品連結](https://danielgg1024.github.io/time/)

  