如何自製輪播圖片,客製屬於自己的造型,不依賴套件的作法

輪播圖片這個效果很多網站都會使用,之前有練習過利用網路上的套件Owl Carousel 2來製作,但得依照套件的設定,才能進行客製化,如果網站寫的看不太懂,就可能無法製作

參考文章:https://rollerblade.tw/owl-carousel2-javascript/

所以現在要參考w3schools的文章,來設計專屬於自己客製化的輪播圖片,會依序根據他的範例程式碼,一步一步來看要怎麼去改編

w3schools範例

1 / 3
Caption Text
2 / 3
Caption Two
3 / 3
Caption Three

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動畫滑鼠滑動效果,增加時間效果,固定時間會輪播,也可以高度自由控制每個區塊,左右鍵的樣式跟位置,點點的位置及顏色

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Shopping Cart