jQuery 教學 – 滑動輪播廣告

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

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

• DemoVIEW IT ONLINE
• DownloadSOURCE FILES

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

http://www.parenting.com.tw

http://tw.asus.com

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

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

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

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

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

Step 1.

1. gNum 變數用於控制組數的初始值以便之後的計算。
2. dX 變數控制水平座標的初始值以便之後的計算。
3. 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 函數以執行滑動效果與套用目前狀態。

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

Step 2.

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

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

Step 3.

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

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

Step 1.

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

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

Step 2.

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

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

Step 1.

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

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

Step 2.

還再看～已經寫完了，趕快去瀏覽器檢視一下撰寫完的成果吧！

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