Javascript 教學 – 輪播式廣告

早期網路上常見的輪播式廣告大多是由 Flash 所完成,但近年來行動裝置的盛行再加上 IOS 不支援 Flash 以及 SEO 極差的情況下,網頁設計師紛紛向 Javascript 、 jQuery 來朝聖。用 Javascript 、 jQuery 來動畫製作效果不僅能排除前面所敘述的問題,更能相容於各家的瀏覽器。以未來整體趨勢來說,撰寫 Javascript 、 jQuery 將是一般網頁設計師所必備的基本技術。

對於現今業界上所看到的情況更是如此,一群 Designer 紛紛向此領域來靠攏;在求職時,公司對於 Designer 的求才條件更是將此技術列為評量之一。因此,未來將要進入此領域的各位,你們是不是要先準備好呢?俗話說~機會是留給準備好的人,不要淪落為「書到用時方恨少」的窘境。

好了~廢話不再多說了!請看以下 Demo 與解說~

JavaScript 程式設計  - Javascript 教學 - 輪播式廣告 - 011


在撰寫 Javascript 之前,請各位先用 CSS 將版面排好(我們在這不再多加詳述 CSS 語法)。大致分兩個區塊來看,分別為廣告輪播區與右側的清單輪播區,如下圖所示:

JavaScript 程式設計  - Javascript 教學 - 輪播式廣告 - 021

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

  1. 載入畫面時的狀態。
  2. 廣告區與清單區的定時輪播。
  3. 當游標滑入廣告區與清單區時則停止輪播效果,滑出則繼續輪播。
  4. 當按下清單區的標籤時,廣告區則跳換到對應的廣告內容;該清單也套用目前的狀態。

載入畫面時的狀態

Step 1.

控制廣告區與清單的初始狀態。為了方便控制,一開始我們利用 for 迴圈將所有廣告區隱藏起來了!再直接指定 id=”con1″ 獨自顯示,另外也為第一個清單內的 <a> 套用類別。

JavaScript 程式設計  - Javascript 教學 - 輪播式廣告 - 031

Step 2.

各位可於瀏覽器上檢視一下此階段的撰寫是否成功。

廣告區與清單區的定時輪播

Step 1.

設定三個變數以利後續控制。

JavaScript 程式設計  - Javascript 教學 - 輪播式廣告 - 041

Step 2.

撰寫一函數 run() 以利未來呼叫使用。其函數內亦撰寫了定時效果呼叫的另一個函數名稱 autoShow 以及定時執行期間的變數 duration。

JavaScript 程式設計  - Javascript 教學 - 輪播式廣告 - 051

Step 3.

撰寫 autoShow() 的函數內容。

  1. 使用迴圈以控制每個執行週期時的廣告區內容隱藏與移除清單內 <a> 所套用的類別。
  2. 再利用判斷式來評判變數 num 是否累加!若超過了總數量則將變數 num 固定為 1 。
  3. 將目前 num 值代入到欲顯示目前狀態的程式中。

JavaScript 程式設計  - Javascript 教學 - 輪播式廣告 - 061

Step 4.

呼叫 run() 函數以執行整個定時輪播,否則會看不到輪播效果喔!

JavaScript 程式設計  - Javascript 教學 - 輪播式廣告 - 071

當游標滑入廣告區與清單區時則停止輪播效果,滑出則繼續輪播

各位應該有發現到目前的狀態是一直不斷地輪播且不會停止!!依我們所設定的定時期間是 2 秒鐘,會導致使用者還沒看清楚內容,2 秒鐘一到就跳到下一個廣告內容了,這樣一來將會讓使用者無所適從。

Step 1.

設定游標滑入與滑出之行為。我們利用的了廣告區與清單區的上層區塊 id=”box” 以進行控制並分別指定了欲執行的函數名稱 stopRun 與 run。

JavaScript 程式設計  - Javascript 教學 - 輪播式廣告 - 081

Step 2.

撰寫 stopRun() 函數。我們在函數裡面撰寫清除定時器的 clearInterval ,至於 run() 我們就可以不必再撰寫了,因為當游標滑出就是繼續執行定時播放。

JavaScript 程式設計  - Javascript 教學 - 輪播式廣告 - 091

Step 3.

各位可於瀏覽器上檢視一下游標滑入可否停止,滑出則繼續播放!

當按下清單區的標籤時,廣告區則跳換到對應的廣告內容;該清單也套用目前的狀態

接下來,我們要為清單區的 <a> 進行撰寫以控制跳換廣告區的內容與清單的目前狀態。

Step 1.

在第一階段中的迴圈內加上游標按下後的行為且呼叫函數 show。

JavaScript 程式設計  - Javascript 教學 - 輪播式廣告 - 101

Step 2.

撰寫 show() 函數。

  1. 抓取目前 click 對象的 id 並利用 substr(3) 取出的值,減掉 1 後再指定給變數 num 。看不太懂吧!再解釋清楚一點~由於 substr() 的初始由 0 算起,再加上我們把每個 id 分別設定為 tab1 、 tab2 、 tab3 、 tab4 、 tab5 ,因此括號內寫 3 便是第四順位的內容了。
    要減 1 的原因為變數 num 的初始值為 1 ,而導致按下後會跳到一個狀態,故我們在此必須做減 1  這個動作。
  2. 再次執行 autoshow() 函數,將變數 num 代入到函數中以達到對應的內容。

JavaScript 程式設計  - Javascript 教學 - 輪播式廣告 - 111

Step 3.

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

 

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

 

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

留言功能已關閉。