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

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

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

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

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

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

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

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

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

而程式會透過 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

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