此種滑動廣告效果在網路上相當的常見~無論是入口網站、購物網站…為了能集中使用者的焦點,或是活動中的促銷方案,又或者是節省版面空間,這類型的展示效果在各網站上比比皆是。
如果不會撰寫 Javascript & jQuery 的話,以某些人過去的經驗,都是需要去尋找並使用網路上的外掛程式,但要修改時卻要大費周章的去研究。畢竟,外掛程式並不是我們自己寫的,這樣一來,時間上的成本耗費是相當地多!因此,建議各位還是學會撰寫 Javascript & jQuery,這樣一來,便能撰寫出屬於自己且獨特的滑動廣告。各位可點閱下方 Demo 以觀賞完成後效果。
以下幾個網站都是有使用滑動廣告呈現:
在撰寫 Javascript 之前,請各位先用 CSS 將版面排好(筆者在這不再多加詳述 CSS 語法)。大致上我們要分三個控制區塊來做處理,如下圖所示:
接下來,整個製作的方向與流程我們幫各位歸納成四階段!
- 宣告欲使用之變數與載入畫面時的狀態。
- 切換至下一組與更新目前狀態。
- 切換至上一組與更新目前狀態。
- 按下目前狀態即跳換到對應的目前組數。
宣告欲使用之變數與載入畫面時的狀態
Step 1.
- gNum 變數用於控制組數的初始值以便之後的計算。
- dX 變數控制水平座標的初始值以便之後的計算。
- WW 變數抓取 <div.slider> 的寬度。
Step 2.
AA 變數用於計算目前組數。
是不是看不太懂了?請看下圖的結構解說~
<ul> 的寬度為 1992px,<div.slider> 的寬度為 830px ,故1992px / 830px = 2.4。經過 Math.floor() 取到整數位得到的值為 2,在指定給 AA 變數。
Step 3.
套用組數的目前狀態。我們用 eq() 來找出同一層級元素並代入 gNum 變數找出第一組 <li> 以套用類別 now。
Step 4.
請儲存並檢視一下目前完成的階段。
切換至下一組與更新目前狀態
Step 1.
撰寫 SS 函數以執行滑動效果與套用目前狀態。
- 以 0.7 秒的時間控制 <ul> 的新座標位置。
- 為 <li> 移除所有類別,再重新指定套用類別的對象。
Step 2.
當按下並放開時以判斷 gNum 有無小於 AA 變數,並執行指定事項。
- 若 gNum 變數小於 AA 變數,則讓 gNum 變數累加 1 並指定給 dX 變數新的座標位置;若 gNum 變數沒有小於 AA 變數,則讓兩個變數都指定為 0 。
- 判斷式執行完畢後再呼叫 SS 函數執行 Step 1. 的滑動效果與更新目前狀態。
Step 3.
請儲存並檢視一下目前完成的階段。
切換至上一組與更新目前狀態
Step 1.
當按下並放開時以判斷 gNum 變數有無大於 0,並執行指定事項。
- 若有 gNum 變數大於 0 時,則讓 gNum 變數累減 1 並指定給 dX 變數新的座標位置。
- 判斷式執行完畢後再呼叫 SS 函數執行 Step 1. 的滑動效果與更新目前狀態。
Step 2.
請儲存並檢視一下目前完成的階段。
按下目前狀態即跳換到對應的目前組數
Step 1.
當按下並放開 <li> 時的執行事項。
- 利用 $(this).index() 擷取出目前物件所在的「排行」數字並指定給 gNum 變數。
- 更新 dX 變數的座標位置。
- 再次呼叫 SS 函數以執行滑動效果與更新目前狀態。
Step 2.
還再看~已經寫完了,趕快去瀏覽器檢視一下撰寫完的成果吧!
如果各位對於 Javascript & jQuery 語法有些問題,請再多加複習!!
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!