輪播圖片這個效果很多網站都會使用，之前有練習過利用網路上的套件Owl Carousel 2來製作，但得依照套件的設定，才能進行客製化，如果網站寫的看不太懂，就可能無法製作
參考文章：https://rollerblade.tw/owl-carousel2-javascript/
所以現在要參考w3schools的文章，來設計專屬於自己客製化的輪播圖片，會依序根據他的範例程式碼，一步一步來看要怎麼去改編
w3schools範例
內容目錄
HTML
針對這個部分的程式碼，這是用來輪播圖的框架，也就是如果畫面上要呈現，幾個區塊，都是在這裡改編他的CSS，裡面包覆的內容分別是
HTNL前半段
- 綠框：整個主體，程式的最外層class是mySlides，而在這裡fade是一個緩緩消失的js動畫，這邊刪除不影響輪播圖片，只會變成瞬間切換為下一張圖，沒有變暗消失的效果
- 藍框：這個區塊主要是用來顯示第幾張圖，所以如果沒有特別要顯示的話，可以刪除，不影響輪播效果
- 紅框：圖片介紹，這是作者想要根據內容作介紹設計的原件，如果沒有特別要顯示的話，可以刪除，不影響輪播效果
- 橘框：主要為圖片設置的地方，他原本設定style="width:100%，這是寬度佔滿整個區塊
如果你想要改編，一個綠框區塊放兩張圖一起輪播，要把這裡改掉寬度50%以下，或其他寬度，要放其他圖東西就得改變寬度，但依照我個人習慣，我不會把CSS在這裡做改編
根據上述介紹的地方，我將進行改編
- 綠框：區塊不變
- 藍框：改成中文
- 橘框：圖片改成兩張，寬度改49%
- 紅框：改中文介紹
HTML後半段
- 棕框：是控制左右移動的地方，這裡寫一段JS函數，當觸及時會啟動plusSlides的function
- 紫框：div是包覆點點的元件，設定CSS有內容物置中的，每一個span都是一個點，觸及後會啟動currentSlide的function
JavaScript
針對CSS的部分將不再做講解，有需要用到的地方，才會特別拿出來講解，而JavaScript的部分只有一個重點，只要掌握那部分，其他地方都很簡單
- 藍框：當你的網頁匯入的時候，就會被執行了，所以設定了一個slideIndex的變數，好紀錄接下來要顯示的位置，然後執行紅框的function
- 橘框：用來觸及左右移動的地方，當左右移動鍵被碰到，就會執行他，這裡還記得上面html寫的，往左就是-1給slideIndex，往右+1給slideIndex，所以改變位置後，接下來就是丟給紅框的function
- 紫框：點點觸及後，就會執行這個變數，記得上面html每一個點點都寫了他的位置，所以slideIndex直接等於點點給的位置，然後丟給紅框的function
有注意到這三個框最後都是丟給紅框處理，所以其實這裡的重點都在紅框，再將紅框內的東西細分下去拆解
- 棕框：設定接下來會用到變數，分別是i迴圈用的，slides抓每一個圖片的區塊，dots每一個點點
- 綠框：設定只要超過輪播圖片的數量，就回到最初或是最後，第一個if 設定只要現在超過輪播圖片最後一張，設定回到第一張，第二個if 小於第一張就會回到最後一張，
- 黃框：第一個for將所有的，圖片區塊，都消失不見，所以將他們CSS中的display取消，第二個for將所有點點CSS中的active取代成””就是取消，而這個CSS呢，變成深色，從下面的圖可以看到，所以現在所有點點都是淺灰色
- 灰框：最後這裡呢，因為黃框取消了所有圖片區塊地顯示跟深色的點點，所以我們現在要把需要出現的圖片顯示出來，以及現在停留在哪一張圖的點點變成重點深色
結論
學會了這個自制的輪播圖片，就可以根據自己的網站需求，在增加自己想要的功能，比如說，增加JS動畫滑鼠滑動效果，增加時間效果，固定時間會輪播，也可以高度自由控制每個區塊，左右鍵的樣式跟位置，點點的位置及顏色