# JavaScript - 燈箱效果
* 完成範例：[CodePen](https://codepen.io/liu_0821/pen/rNProrr)、[GitHub](https://github.com/liu-huangling/JSPractice)、[Medium](https://medium.com/@LindaLiu0821/javascript%E5%9C%B0%E4%B8%8B%E5%9F%8E11-%E7%87%88%E7%AE%B1%E6%95%88%E6%9E%9C-991d4666d0cd)

> 11F - 燈箱效果

### 使用語法
* HTML、CSS(SCSS)、原生JS(規定)
### 攻略要點
1. 【特定技術】不可用 JS 框架，只能單純用原生 JS。
2. 【特定技術】需符合響應式設計，什麼你說設計稿沒提供？嗯，你是勇者嘛，通靈什麻的一定略懂略懂嘍
3. 【特定技術】當螢幕伸縮(resize)時，介面與 JS 功能也需正常
### 拆解步驟
* **HTML**
* 這次一樣採用一頁式網站來做設計，所以分成以下三大區塊來製作。

* **CSS(SCSS)**
* 這次RWD斷點分別為`1200px`、`992px`、`768px`、`414px`，剛好是桌機、平板、手機的尺寸～
* 比較有小巧思的地方是陰影的部分，雖然使用`box-shadow`就可以做，但就比較生硬一點，所以就加上動畫與縮放，讓他移入的效果更有趣唷～

* **JavaScript**
這次JS就短短幾行而已哈哈哈，就快速來看看邏輯吧！
* 這次圖片我是寫死的，但設定陣列之後用迴圈帶入一樣不會影響後面輪放的函數唷～（只是我有點懶哈哈哈）
* 圖片上設定`dataset`給他數值，讓他點選到該圖片就會進入以下函式
* 以帶入的數字設為`n`，並先給`預設變數`=1。
* 當`n` > 圖片數量，則`預設變數`== 1，會回到第一張。
* 當`n` < 1，則`預設變數`== 圖片數量，會回到最後一張。
* 其餘`n`==`預設變數`，當下只會有`預設變數`的圖片出現，其餘皆為`none`。
* 接下來可以到點選前後一張，則是先擷取目前`預設變數`值再分別加減`1`，重新呼叫判斷函數即大功告成！！！

### 結尾
* 這次完成的時間算是蠻快的，加上剛好公司專案有需求，所以大概不到一天就做好了（寫文章反而比寫程式還來得久(´-ι_-｀)）
* 說一下這次比較困難的點是用原生JS寫輪播的功能，畢竟[**slick套件**](https://kenwheeler.github.io/slick/)真的太好用了，另外一點是響應式設計（挑戰通靈？？），但我覺得比起前面的幾關都算是不難的技術～
* 不知道有沒有人發現怎麼第九關直接跳到第十一關，沒有也不意外哈哈哈，文章寫給自己看的(ㆆᴗㆆ)，因為第十關我想應該要寫很久-`д´-，所以就容許我先跳關XD

---

##### ヽ(∀ﾟ )人(ﾟ∀)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人( ﾟ∀)人

##### 以上 如果哪裡有錯誤或有問題，歡迎提出來一起討論~~~~