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

作者：男丁格爾 | 日期：2010-01-22 | 分類：jQuery 應用 | 瀏覽：4,527 | 留言：39

現在的廣告效果真的都是越做越有趣了，像是有同學問說是否能用 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 版才行喔。

範例瀏覽：
http://demonstration.abgne.tw/jquery/0017/0017_1.html
http://demonstration.abgne.tw/jquery/0017/0017_2.html
http://demonstration.abgne.tw/jquery/0017/0017_3.html

相關連結
推薦內容
標籤：, , , , , ,
發表留言

如果有任何 jQuery 問題也可以直接到 討論區 中發文討論。
  1. 阿濤
    2010-01-22 23:02:59 回覆

    請問一下大大
    我照原始檔案摳下來
    照片也都有抓js檔案也有抓
    但是那個選單的背景圖片就是不會顯示可以請教一下嗎


    • 男丁格爾
      男丁格爾
      2010-01-22 23:09:41 回覆

      圖片的路徑對嗎..?選單的背景圖片有兩張喔..!


  2. 阿濤
    2010-01-23 07:39:39 回覆

    menu_off.gif
    menu_on1.gif
    我放在同檔案的
    images資料夾下面說


    • 男丁格爾
      男丁格爾
      2010-01-23 09:50:18 回覆

      把你有問題的範例傳來看看...@@


  3. 查爾必斯
    2010-01-23 23:30:56 回覆

    推推推~~~實用的效果!!!


  4. kimihu
    2010-02-05 21:13:33 回覆

    可以分享menu.off.gif(灰)和menu.on.gif(藍)兩張圖片嗎?
    感恩呀!!


  5. kimihu
    2010-02-06 12:03:49 回覆

    收到 非常謝謝你^^


  6. Iven
    2010-02-09 16:51:21 回覆

    我有個問題想請教一下~

    製作完此範例後，FF看是無法正常顯示的，但IE都是正常~不了解問題是出在那！？

    求救~~~~~hlep>"<~


    • 男丁格爾
      男丁格爾
      2010-02-09 17:00:08 回覆

      要有範例才知道那邊有問題..@@||
      你用 FF 瀏覽我的範例也是不正常嗎?


  7. 阿濤
    2010-02-28 22:10:57 回覆

    不好意思男大
    就這個範例
    我要把東西擺在中間
    有辦法嗎因為我用table把她們包起來也沒用
    可以教導一下嗎


    • 男丁格爾
      男丁格爾
      2010-03-01 09:44:34 回覆

      你把整個 DIV 放在你 Table 中來使用應該是可以的吧..@@||
      不然就是要提供你現在有問題的範例檔案才能找出問題


  8. aniu
    2010-03-03 18:37:41 回覆

    你寫的很完整也很好用
    讓我頭髮不會再白了
    問題來了
    現在播放順序是1234...1234
    播到第4的時候又會從1開始
    如果
    我的播放順序是1234...4321呢
    我該加什麼語法
    謝謝賜教


    • 男丁格爾
      男丁格爾
      2010-03-04 09:56:20 回覆

      你要變更計算出下一個要展示的廣告選項這部份的判斷才行..
      讓它能依你的順序來播放


  9. michelle
    2010-03-09 21:38:02 回覆

    想請問用c#寫 單純文字輪播..不要有圖片的..
    大概要怎麼寫??


    • 男丁格爾
      男丁格爾
      2010-03-10 09:41:54 回覆

      比較簡單的就是控制 Label 的座標移動囉..利用 Timer 來設訂每隔 N 時移動 M 距離。


  10. 小愛
    2010-03-22 11:06:01 回覆

    這好讚!!我要學起來^^

    想請問一下,右邊的那個區塊阿!!

    可以個別放不同圖片嗎??想放各個的小圖示
    (原右邊顯示區塊為灰色透明,當跑到正顯示時的區塊右邊則不透明)

    可以嗎???謝謝


  11. derek
    2010-03-22 15:20:33 回覆

    to 小愛：
    可以，小弟已經修改過程式碼，只要再自行製透明及非透明兩種圖示即可
    請自行看此範例的原始碼：
    http://twcf2-summerhost-info/soujq-htm
    將上方網址的 "-" 換成 "點"


  12. 如娃
    2010-04-14 18:22:29 回覆

    男丁您好：
    　真不好意思！我又遇上麻煩了，想要用「標籤式垂直廣告輪播」加上「用 jQuery 來製作網頁頁籤(Tab)」，這兩個的「strict.dtd」或「jquery.min.js」不知是那一個衝突，放入「網頁頁籤」之後，「廣告輪播」放的位置就不會按照程式出現（我是放在很多欄很多列的表格裡），「網頁頁籤」拿掉就會正常出現在表格裡，一放入「網頁頁籤」，「廣告輪播」就跑到網頁表格外的最下面。怎麼辦？我看過這兩個的「strict.dtd」、「jquery.min.js」的檔案內容不同可以合併嗎？或是改程式的那個地方呢？

    程式上方放這樣可以嗎？


    • 男丁格爾
      男丁格爾
      2010-04-14 18:48:35 回覆

      通常都是 css 搞的鬼...可以的話..把你現在有問題的 html 提供給我看看


  13. 如娃
    2010-04-14 18:39:04 回覆

    「!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "strict.dtd"
    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "strict2.dtd"」
    「script type="text/javascript" src="jquery.min.js"
    script type="text/javascript" src="jquery.min2.js"」這兩種程式可以各放兩行嗎？


    • 男丁格爾
      男丁格爾
      2010-04-14 18:49:11 回覆

      DOCTYPE 應該只能出現一次...script 則沒差..
      但同樣的東西沒必要載兩次


  14. 如娃
    2010-04-15 13:04:26 回覆

    http://www.sabugui.com.tw/0329/home/5678.htm <==直接連結吧！ 先謝謝囉！


    • 男丁格爾
      男丁格爾
      2010-04-15 13:30:33 回覆

      strict2.dtd 跟 jquery.min2.js 都可以拿掉..
      另外...把 #adblock ul.showbox, #adblock ul.link 的 position 給拿掉就能顯示了..

      ?檢視原始碼 CSS
      1
2
3

      #adblock ul.showbox, #adblock ul.link {
	/*position: absolute;*/
}

      但..感覺怪怪的...太多用 Table 來排版實在是太難看的懂了XD


  15. 如娃
    2010-04-15 14:04:34 回覆

    background: url(images/menu.on1.gif);
    background: url(images/menu.off.gif);
    <==但變成這兩個圖及主題文字都不見了,床的圖片也不會跳了,怎麼辦?


    • 男丁格爾
      男丁格爾
      2010-04-15 14:07:05 回覆

      把 html + js + 圖片整包寄給我試看看..XD


  16. 如娃
    2010-04-15 14:08:05 回覆

    本來的換圖時間到了,狀態列就會出現"網頁發生錯誤"的字樣,剛剛的網頁已更新成您說的那樣,您可以再看看~


    • 男丁格爾
      男丁格爾
      2010-04-15 14:12:00 回覆

      嗯嗯~~原本你未改之前時用非 IE 瀏覽器看是有顯示的..
      但 IE 雖然一開始沒顯示..但切到其它視窗後再切回來就又有了..

      這應該是 IE 在搞怪..


  17. 如娃
    2010-04-15 14:18:21 回覆

    寄給你了,壓縮檔哦!
    寄到abgne.tw@gmail.com


    • 男丁格爾
      男丁格爾
      2010-04-15 14:20:45 回覆

      已回信給你...試看看吧!!


  18. 如娃
    2010-04-15 14:36:42 回覆

    嗚~還是不行,你可以重新整理看看~


    • 男丁格爾
      男丁格爾
      2010-04-15 15:22:14 回覆

      唔~剛忘了把 position: absolute; 加回去..
      請你再試試剛剛寄給你的檔案吧~


  19. 如娃
    2010-04-15 15:21:40 回覆

    沒關係,我已經找到方法可以暫時解決了。 原來,「網頁頁籤」跟「廣告輪播」只要放在表格裡的不同列就可以正常顯示了！我試了一天，總算找到一個治標不治本的方法~
    一樣謝謝你很棒的範例哦~如果之後有更好的方法,記得要E-mail告訴我！先謝過囉！


    • 男丁格爾
      男丁格爾
      2010-04-15 15:23:37 回覆

      其實...可以的話..盡量少用 table 來排版頁面了XD


  20. 阿茂
    2010-04-17 20:44:47 回覆

    很喜歡這個效果~


  21. javacat
    2010-06-06 12:24:45 回覆

    請問大大
    選單如果要放在右邊 showbox改在左邊 該怎麼設定呢

    謝謝


  22. Black
    2010-07-14 14:29:52 回覆

    仿 Yahoo 標籤式垂直廣告輪播

    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);
    }

    $(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();
    });




    Nexus One
    iPhone 3GS
    HTC Hero
    HTC HD2

    板主您好,本人第一次學語法 這是全部的語法 請問這要怎麼改呢@@


    • 男丁格爾
      男丁格爾
      2010-07-14 14:32:41 回覆

      我不知道你把我範例的程式碼貼出來後是要問什麼問題..