jQuery 教學 – 動態廣告輪播 – 仿 Yahoo 切換式 N 格圖片廣告

還記得筆者曾經寫過一篇仿 Yahoo 切換式兩格圖片廣告嗎?因為原本只是針對一次兩格來做效果,所以就有蠻多網友問說怎樣一次顯示超過兩格呢?剛好趁著 Yahoo! 奇摩新聞原本的效果也因為改版而有一點點不同

JavaScript 程式設計  - jQuery 教學 - 動態廣告輪播  - 仿 Yahoo 切換式 N 格圖片廣告 - fly07_thumb

範例預覽一:http://demonstration.abgne.tw/jquery/0048/0048_1.html
範例預覽二:http://demonstration.abgne.tw/jquery/0048/0048_2.html

 

所以筆者此次就教各位如何寫個能 N 格切換的效果。

以下 HTML 的部份簡單一點點了↓

JavaScript 程式設計  - jQuery 教學 - 動態廣告輪播  - 仿 Yahoo 切換式 N 格圖片廣告 - fly01_thumb

 

以下 接著一樣是利用 CSS 來裝飾↓

JavaScript 程式設計  - jQuery 教學 - 動態廣告輪播  - 仿 Yahoo 切換式 N 格圖片廣告 - fly02_thumb

JavaScript 程式設計  - jQuery 教學 - 動態廣告輪播  - 仿 Yahoo 切換式 N 格圖片廣告 - fly03_thumb

JavaScript 程式設計  - jQuery 教學 - 動態廣告輪播  - 仿 Yahoo 切換式 N 格圖片廣告 - fly04_thumb

 

基本上當套用上 CSS 後就能看到 9 成的畫面了↓

JavaScript 程式設計  - jQuery 教學 - 動態廣告輪播  - 仿 Yahoo 切換式 N 格圖片廣告 - fly07_thumb1

 

那…jQuery 只要把控制切換及移動的功能補上就可以囉↓

JavaScript 程式設計  - jQuery 教學 - 動態廣告輪播  - 仿 Yahoo 切換式 N 格圖片廣告 - fly05_thumb

JavaScript 程式設計  - jQuery 教學 - 動態廣告輪播  - 仿 Yahoo 切換式 N 格圖片廣告 - fly06_thumb

 

而程式會透過 li 及 .frame 的寬度來計算判斷一次要顯示幾個

(li 的寬度 + li 的邊框寬度 * 2 ) * 一次要顯示的數量 + li 的右邊界 * (一次要顯示的數量 - 1)

 

所以在範例 2 中只要在 CSS 的部份額外多了一次顯示 3 個的設定:

.demo2, .demo2 .frame {
	width: 620px;	/* (li 的寬度 + li 的邊框寬度 * 2 ) * 一次要顯示的數量 + li 的右邊界 * (一次要顯示的數量 - 1) */
}
範例預覽一:http://demonstration.abgne.tw/jquery/0048/0048_1.html
範例預覽二:http://demonstration.abgne.tw/jquery/0048/0048_2.html
範例下載:http://www.flycan.com/example/abgne_tw_0048.zip

 

本文作者:
男丁格爾
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

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

迴響已被關閉。