2014年12月16日 星期二

Javascript & jQuery – 滑動廣告篇

此種滑動廣告效果在網路上相當的常見~無論是入口網站、購物網站…為了能集中使用者的焦點,或是活動中的促銷方案,又或者是節省版面空間,這類型的展示效果在各網站上比比皆是。
如果不會撰寫 Javascript & jQuery 的話,以某些人過去的經驗,都是需要去尋找並使用網路上的外掛程式,但要修改時卻要大費周章的去研究。畢竟,外掛程式並不是我們自己寫的,這樣一來,時間上的成本耗費是相當地多!因此,建議各位還是學會撰寫 Javascript & jQuery,這樣一來,便能撰寫出屬於自己且獨特的滑動廣告。各位可點閱下方 Demo 以觀賞完成後效果。




在撰寫 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 語法有些問題,請再多加複習!!

沒有留言:

張貼留言