Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 頁籤式廣告輪播

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

頁籤在網頁的用途上不一定是只能顯示資料用，改一下顯示內容也能用來當廣告展示用的。所以筆者要教各位如果利用頁籤的方式來展開廣告囉。

在開始動手做之前，筆者先到梅干的網站 A 了幾圖片來做範例使用。接著開始準備 HTML 囉：

檢視原始碼 HTML
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

<body>
	<div id="abgne-block-20110111">
		<div class="bd">
			<div class="info on">
				<a href="#"><img src="images/1.jpg" /></a>
			</div>
			<div class="info">
				<a href="#"><img src="images/2.jpg" /></a>
			</div>
			<div class="info">
				<a href="#"><img src="images/3.jpg" /></a>
			</div>
			<div class="info">
				<a href="#"><img src="images/4.jpg" /></a>
			</div>
			<div class="title">
				<ul>
					<li class="on"><h3>自製小燈快接環</h3><p>小棚燈立即就變成大型棚燈囉!且七百元有找喔!</p></li>
					<li><h3>金黃酥脆麵包</h3><p>蜂巢是讓梅干感到最好奇的</p></li>
					<li><h3>高質感的亮皮娃娃鞋</h3><p>單燈也能拍出高質感的亮皮娃娃鞋</p></li>
					<li><h3>火箭炮:Profoto</h3><p>這隻燈就是鄧子叔叔當初創業時送給林老背的</p></li>
				</ul>
			</div>
		</div>
	</div>
</body>

當然再來就是要靠 CSS 排版：

檢視原始碼 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
43
44
45
46
47
48
49
50
51
52

body{
	font-size: small;
}
ul, li, h3, p{
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
a img {
	bordeR: none;
	vertical-align:middle;
}
#abgne-block-20110111 {
	width: 600px;
	border: 1px solid #ccc;
}
#abgne-block-20110111 .info {
	display: none;
}
#abgne-block-20110111 .on {
	display: block;
}
#abgne-block-20110111 .title {
	border-top: 2px solid #f6c;
}
#abgne-block-20110111 .title li {
	cursor: pointer;
	float: left;
	width: 135px;
	background-color: #3e3e3e;
	border-right: 1px solid #000;
	height: 54px;
	padding: 7px 7px 4px;
}
#abgne-block-20110111 .title li.on, #abgne-block-20110111 .title li.over {
	background-color: #f6c;
	border-right: 1px solid #f6c;
}
#abgne-block-20110111 .title li h3 {
	font-size: 13px;
	color: #c90;
	padding-bottom: 6px;
}
#abgne-block-20110111 .title li p{
	font-size: 12px;
	color: #ccc;
}
#abgne-block-20110111 .title li.on h3, #abgne-block-20110111 .title .over h3, #abgne-block-20110111 .title li.on p, #abgne-block-20110111 .title .over p {
	color: #fff;
}

還沒動手寫程式前的畫面就已經有點樣子囉~

再來要做的就是利用 jQuery 來切換廣告的顯示：

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

$(function(){
	// 先取得 #abgne-block-20110111
	var $block = $('#abgne-block-20110111');
 
	// 幫 #abgne-block-20110111 .title ul li 加上 hover() 事件
	$('#abgne-block-20110111 .title ul li').hover(function(){
		// 當滑鼠移上時加上 .over 樣式
		$(this).addClass('over').siblings('.over').removeClass('over');
	}, function(){
		// 當滑鼠移出時移除 .over 樣式
		$(this).removeClass('over');
	}).click(function(){
		// 當滑鼠點擊時, 顯示相對應的 div.info
		// 並加上 .on 樣式
		var $this = $(this);
		$this.add($('.bd div.info', $block).eq($this.index())).addClass('on').siblings('.on').removeClass('on');
	});
});

預設的效果是當滑鼠移到下面的類似頁籤的標題時會改變背景顏色，若點擊時則會立即切換顯示相對應的廣告。若沒問題的話，接著繼續來加強改造成能自動輪播哩！

檢視原始碼 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

$(function(){
	// 先取得 #abgne-block-20110111 , 必要參數及輪播間隔
	var $block = $('#abgne-block-20110111'), 
		timrt, speed = 3000;
 
	// 幫 #abgne-block-20110111 .title ul li 加上 hover() 事件
	var $li = $('.title ul li', $block).hover(function(){
		// 當滑鼠移上時加上 .over 樣式
		$(this).addClass('over').siblings('.over').removeClass('over');
	}, function(){
		// 當滑鼠移出時移除 .over 樣式
		$(this).removeClass('over');
	}).click(function(){
		// 當滑鼠點擊時, 顯示相對應的 div.info
		// 並加上 .on 樣式
		var $this = $(this);
		$this.add($('.bd div.info', $block).eq($this.index())).addClass('on').siblings('.on').removeClass('on');
	});
 
	// 幫 $block 加上 hover() 事件
	$block.hover(function(){
		// 當滑鼠移上時停止計時器
		clearTimeout(timer);
	}, function(){
		// 當滑鼠移出時啟動計時器
		timer = setTimeout(move, speed);
	});
 
	// 控制輪播
	function move(){
		var _index = $('.title ul li.on', $block).index();
			_index = (_index + 1) % $li.length;
		$li.eq(_index).click();
 
		timer = setTimeout(move, speed);
	}
 
	// 啟動計時器
	timer = setTimeout(move, speed);
});

如果測試過程中覺得輪播的控制有問題時，建議可以用個 flag 來判斷使用。或者也能把頁籤從區塊下面改到區塊上面。

範例 1 範例 2 範例 3

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

23 筆針對 [jQ]用 jQuery 做廣告 – 頁籤式廣告輪播 的迴響

1 2

  2. 老師你好，我想把同效果放在同一頁面中，如放入A和B，但按B想換圖片只會換A的大圖
    B有移動頁籤區塊但不會換圖，是要改.eq($this.index())和程式嗎?

  4. 不好意思，我問的可能很初階，我想請問如果我每個頁籤想滑過去就顯示1個網頁頁面，要怎麼設定呢?

    • 主要是把 .addClass('on') 或是 .removeClass('on') 的改成 .fadeIn() 跟 .fadeOut()
      但...要讓 .info 這些圖片疊在一起來能有好效果

1 2

發表迴響