jQuery 教學 – 滑動輪播廣告

此種滑動廣告效果在網路上相當的常見~無論是入口網站、購物網站…為了能集中使用者的焦點,或是活動中的促銷方案,又或者是節省版面空間,這類型的展示效果在各網站上比比皆是。

如果不會撰寫 Javascript & jQuery 的話,以某些人過去的經驗,都是需要去尋找並使用網路上的外掛程式,但要修改時卻要大費周章的去研究。畢竟,外掛程式並不是我們自己寫的,這樣一來,時間上的成本耗費是相當地多!因此,建議各位還是學會撰寫 Javascript & jQuery,這樣一來,便能撰寫出屬於自己且獨特的滑動廣告。各位可點閱下方 Demo 以觀賞完成後效果。

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 01


以下幾個網站都是有使用滑動廣告呈現:

http://www.parenting.com.tw

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 02

http://tw.asus.com

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 03

http://mlb.mlb.com/index.jsp

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 04


在撰寫 Javascript 之前,請各位先用 CSS 將版面排好(筆者在這不再多加詳述 CSS 語法)。大致上我們要分三個控制區塊來做處理,如下圖所示:

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 05

接下來,整個製作的方向與流程我們幫各位歸納成四階段!

  1. 宣告欲使用之變數與載入畫面時的狀態。
  2. 切換至下一組與更新目前狀態。
  3. 切換至上一組與更新目前狀態。
  4. 按下目前狀態即跳換到對應的目前組數。

宣告欲使用之變數與載入畫面時的狀態

Step 1.

  1. gNum 變數用於控制組數的初始值以便之後的計算。
  2. dX 變數控制水平座標的初始值以便之後的計算。
  3. WW 變數抓取 <div.slider> 的寬度。

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 06

Step 2.

AA 變數用於計算目前組數。

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 07

是不是看不太懂了?請看下圖的結構解說~

<ul> 的寬度為 1992px,<div.slider> 的寬度為 830px ,故1992px / 830px = 2.4。經過 Math.floor() 取到整數位得到的值為 2,在指定給 AA 變數。

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 08

Step 3.

套用組數的目前狀態。我們用 eq() 來找出同一層級元素並代入 gNum 變數找出第一組 <li> 以套用類別 now。

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 09

Step 4.

請儲存並檢視一下目前完成的階段。

切換至下一組與更新目前狀態

Step 1.

撰寫 SS 函數以執行滑動效果與套用目前狀態。

  1. 以 0.7 秒的時間控制 <ul> 的新座標位置。
  2. 為 <li> 移除所有類別,再重新指定套用類別的對象。

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 10

Step 2.

當按下並放開時以判斷 gNum 有無小於 AA 變數,並執行指定事項。

  1. 若 gNum 變數小於 AA 變數,則讓 gNum 變數累加 1 並指定給 dX 變數新的座標位置;若 gNum 變數沒有小於 AA 變數,則讓兩個變數都指定為 0 。
  2. 判斷式執行完畢後再呼叫 SS 函數執行 Step 1. 的滑動效果與更新目前狀態。

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 11

Step 3.

請儲存並檢視一下目前完成的階段。

切換至上一組與更新目前狀態

Step 1.

當按下並放開時以判斷 gNum 變數有無大於 0,並執行指定事項。

  1. 若有 gNum 變數大於 0 時,則讓 gNum 變數累減 1 並指定給 dX 變數新的座標位置。
  2. 判斷式執行完畢後再呼叫 SS 函數執行 Step 1. 的滑動效果與更新目前狀態。

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 12

Step 2.

請儲存並檢視一下目前完成的階段。

按下目前狀態即跳換到對應的目前組數

Step 1.

當按下並放開 <li> 時的執行事項。

  1. 利用 $(this).index() 擷取出目前物件所在的「排行」數字並指定給 gNum 變數。
  2. 更新 dX 變數的座標位置。
  3. 再次呼叫 SS 函數以執行滑動效果與更新目前狀態。

JavaScript 程式設計  - jQuery 教學 - 滑動輪播廣告 - 13

Step 2.

還再看~已經寫完了,趕快去瀏覽器檢視一下撰寫完的成果吧!

如果各位對於 Javascript & jQuery 語法有些問題,請再多加複習!!

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

posted in JavaScript 程式設計 and tagged , , , , , .

留言功能已關閉。