Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 仿 Yahoo 標籤式垂直廣告輪播

[ 日期： | 瀏覽：71,253 | 迴響：102 ]
範例 1
範例 2
請協助我把這個效果加到我的網站 (只要 1,600 元)
沒錯!只要 1,600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

現在的廣告效果真的都是越做越有趣了，像是有同學問說是否能用 jQuery 做到像Yahoo!奇摩的 Flash 廣告效果，例如：超級商城的流行館或是時尚館



這塊 Flash 廣告的基本效果是：當滑鼠移到某一項目時，除了選項的背景樣式會改變之外，還會把左邊的圖片捲動到相對應的廣告。同時若沒把滑鼠移到選項時，它會自動的每隔 N 秒輪播下一個廣告。

從畫面看來，我們至少需要一組廣告圖片及相對應數量的一組選項。這邊筆者都用 ul 來做廣告圖片及選項的區塊：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<body>
	<div id="adblock">
		<ul class="showbox">
			<li><a href="http://www.google.com/phone"><img src="images/nexus_one.gif" title="Nexus One" /></a></li>
			<li><a href="http://www.apple.com/tw/iphone/why-iphone/"><img src="images/iphone.gif" title="iPhone 3GS" /></a></li>
			<li><a href="http://www.htc.com/tw/product/hero/overview.html"><img src="images/hero.gif" title="HTC Hero" /></a></li>
			<li><a href="http://www.htc.com/tw/product/hd2/overview.html"><img src="images/hd2.gif" title="HTC HD2" /></a></li>
		</ul>
		<ul class="link">
			<li><a href="#">Nexus One</a></li>
			<li><a href="#">iPhone 3GS</a></li>
			<li><a href="#">HTC Hero</a></li>
			<li><a href="#">HTC HD2</a></li>
		</ul>
	</div>
</body>

有了兩組 ul 之後，接著要讓他們一個在左，一個在右的併排在一起：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

a img {
	border: none;
	vertical-align: middle;
}
#adblock {
	overflow: hidden;
	width: 920px;	/* 廣告圖片的寬 + 選單圖片最大的寬 */
	height: 220px;	/* 廣告圖片的高 */
	border: 1px solid #ccc;
	position: relative;
}
#adblock ul, #adblock li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#adblock ul.showbox, #adblock ul.link {
	position: absolute;
}
#adblock ul.showbox li a {
	display: block;
	height: 220px;	/* 廣告圖片的高 */
}
#adblock ul.link {
	right: 0;
}
#adblock ul.link li a {
	display: block;
	width: 180px;	/* 滑鼠未移入時的選單圖片寬 */
	height: 55px;	/* 選單圖片的高 */
	position: absolute;
	text-indent:20px;
	line-height: 55px;
	background-color: #ccc;
	right: 0;
	background: url(images/menu.off.gif);
}
#adblock ul.link li a.selected {
	width: 200px;	/* 滑鼠移入時的選單圖片寬 */
	text-indent: 40px;
	background: url(images/menu.on.gif);
}

筆者為了讓選項也能像Yahoo!奇摩的一樣能靠右對齊且左邊是突出去的，因此就讓選項的 position 設成 absolute 之外，還讓它們的 right 都是歸 0 靠右。但這樣選項卻因為沒設定 top 而推擠在一起了：



雖然可以一張一張的設定 top 位置，但筆者實在是太懶了，因此就把排位置的動作都交給 jQuery 來代勞：

檢視原始碼 JavaScript
1
2
3
4
5
6

$(function(){
	$('#adblock ul.link li a').each(function(i){
		// 把選單排好位置
		$(this).css('top', i * 55);
	});
});



嘿~這樣是不是方便很多了呢？！接下來就讓我們一口氣來完成接下來的事件及動作吧：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(function(){
	// 大廣告圖片的高度及動畫時間
	var adHeight = 220,
		animateSpeed = 400;
	$('#adblock ul.link li a').each(function(i){
		// 把選單排好位置
		$(this).css('top', i * 55);
	}).mouseover(function(){
		var $this = $(this),
			// 找出目前 li 是在選單中的第幾個(jQuery 1.4)
			no = $this.parent().index();
 
		// 先移除有 .selected 的超連結的樣式
		$('#adblock ul.link li a.selected').removeClass('selected');
		// 再把目前點擊到的超連結加上 .selected
		$this.addClass('selected');
 
		// 把 ul.showbox 的 top 移到相對應的高度
		$('#adblock ul.showbox').stop().animate({
			top: adHeight * no * -1
		}, animateSpeed);
	}).focus(function(){
		$(this).blur();
	}).eq(0).mouseover();
});

有沒有發現到咱們的程式+註解都還比 CSS 還要少咧？其實要寫出一個好的效果，除了程式之外，CSS 所扮演的角色也是有一定的份量的唷！若沒問題的話，預覽時可以看到不輸給 Flash 的廣告效果：



只要把滑鼠移到右邊的選項時，左邊的圖片就會自動捲動到相對應的廣告。若要讓它能自動輪播的話，則得再加上一個計時器而控制用的函式：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

$(function(){
	// 大廣告圖片的高度及動畫時間
	// 計時器及輪播時間(毫秒)
	var adHeight = 220,
		animateSpeed = 400,
		timer,
		speed = 3500;
 
	function showNext(){
		// 找出目前是第幾個選項被展示出來(jQuery 1.4)
		var $li = $('#adblock ul.link li'),
			no = $li.has('a.selected').index();
 
		// 計算出下一個要展示的廣告選項
		no = (no + 1) % $li.length;
 
		// 觸發指定選項的 mouseover 事件
		$li.eq(no).children('a').mouseover();
 
		// 再啟動計時器
		timer = setTimeout(showNext, speed);
	}
 
	$('#adblock ul.link li a').each(function(i){
		$(this).css('top', i * 55);
	}).hover(function(){
		var $this = $(this),
			// 找出目前 li 是在選單中的第幾個(jQuery 1.4)
			no = $this.parent().index();
 
		// 先移除有 .selected 的超連結的樣式
		$('#adblock ul.link li a.selected').removeClass('selected');
		// 再把目前點擊到的超連結加上 .selected
		$this.addClass('selected');
 
		// 把 ul.showbox 的 top 移到相對應的高度
		$('#adblock ul.showbox').stop().animate({
			top: adHeight * no * -1
		}, animateSpeed);
 
		// 移除計時器
		clearTimeout(timer);
	}, function(){
		// 啟動計時器
		timer = setTimeout(showNext, speed);
	}).focus(function(){
		$(this).blur();
	}).eq(0).addClass('selected');
 
	// 當滑鼠移到廣告上時停止計時器..移出後啟動計時器
	$('#adblock ul.showbox li').hover(function(){
		clearTimeout(timer);
	}, function(){
		timer = setTimeout(showNext, speed);
	});
 
	// 啟動計時器
	timer = setTimeout(showNext, speed);
});

另外要注意的是，此範例中 .has() 及 .index() 的用法是 jQuery 1.4 才支援的，因此要記的引用 1.4 版才行喔。

範例 1 範例 2 範例 3

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

102 筆針對 [jQ]用 jQuery 做廣告 – 仿 Yahoo 標籤式垂直廣告輪播 的迴響

1 2 3 4 5 6 7

  2. 阿，不用了^^"

    發現把速度改成0，就可以直接換到另一張。

    這個效果就是我想要的了。

    謝謝男丁大師^^

  4. 男丁老師謝謝你無私的分享!你的語法寫得乾淨又清楚~真是佛心來的!謝謝你幫助了像我們這種程式傻瓜能做出這些酷炫效果Q_Q

  7. 請問這個範例可以使用在政府網站上嗎?
    另外請問圖片如何改成淡入淡出效果，我有參考淡入淡出式的切換影像這一篇，但因為我不太懂JavaScript，所以不會套用，可以請問要如何修改嗎?

    • 用在政府網站是 ok, 只是這範例的 css 排版及程式就是針對滑動來做的，所以如果你真的不會 JavaScript 的話, 可能要修改就會有點...小難度。

    • 如果你連套用JavaScript都不上手，建議你請男丁格爾大大幫你套用，右上角有寫費用項目，真的不貴。
      如果你連這筆錢都想省下來，建議你上網找 Dreamweaver CS 3 版以上，使用 spry data set 功能，載入外部的 HTML 資料集(做成 TABLE 表)，上網搜尋一下，效果類似，但比較沒這麼動態效果而已。

    • 主要差在右邊的選單, 你看看 .link 部份, 因為每一個 a 都是高 55px, 再加上整個區塊高只有 220px, 所以最多就只能有4個圖囉!

  9. 想請問男丁大大,如果想在一個頁面同時嵌入兩個這個的模組,但互為獨立運作,要怎麼做修改呢?是修改id adblock 嗎?css的部份是不是也會有所更動?謝謝你哦!

    • 是的, 如果不熟悉程式的話, 改 id 是最快的, 當然相對應配合的 css 及 js 中的 id 也要改~
      不然就是要這範例改成外掛版才行

1 2 3 4 5 6 7

發表迴響