Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 仿 Yahoo 切換式兩格圖片廣告

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

不知道各位在 Yahoo 新聞 中看新聞消息時，是否有注意到網頁中有用來推薦最新消息用的兩格圖片效果：



每一個都會有 2-N 張圖片內容，除了可透過左右鈕來切換內容之外；右上角也會有小圓點來表示共有幾對內容，點擊小圓點也能立即的切換到該對圖片上。這樣的效果用來當商品展示或是廣告展示都蠻有效果的。所以筆者這次又要教各位如果做一個"山寨版"的囉。

首先就是要準備一下 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
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

<body>
	<div class="showBox">
		<h2 class="title">最新產品推薦</h2>
		<div class="roll"></div>
		<div class="btn">
			<a href="#" class="prev">Prev</a>
			<a href="#" class="next">Next</a>
		</div>
		<ul class="itemList">
			<li>
				<a href="#" class="adContent">
					<img src="images/s.gif" alt="" />
					<h3>Script - S</h3>
				</a>
				<a href="#" class="adContent">
					<img src="images/c.gif" alt="" />
					<h3>Script - C</h3>
				</a>
			</li>
			<li>
				<a href="#" class="adContent">
					<img src="images/r.gif" alt="" />
					<h3>Script - R</h3>
				</a>
				<a href="#" class="adContent">
					<img src="images/i.gif" alt="" />
					<h3>Script - I</h3>
				</a>
			</li>
			<li>
				<a href="#" class="adContent">
					<img src="images/p.gif" alt="" />
					<h3>Script - P</h3>
				</a>
				<a href="#" class="adContent">
					<img src="images/t.gif" alt="" />
					<h3>Script - T</h3>
				</a>
			</li>
			<li>
				<a href="#" class="adContent">
					<img src="images/js.gif" alt="" />
					<h3>JavaScript</h3>
				</a>
				<a href="#" class="adContent">
					<img src="images/jq.gif" alt="" />
					<h3>jQuery</h3>
				</a>
			</li>
		</ul>
		<a href="#" class="more">More</a>
	</div>
</body>

其中 div.roll 是用來放置小圓點的；而 ul.itemList 中的每一個 li 都是用來顯示內容使用的，其中會再用 a 來切成左右各一塊。接著用 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

.showBox {
	width: 290px;
	height: 220px;
	border: 1px solid black;
	position: relative;
	overflow: hidden;
	font-family: Arial;
	letter-spacing: 1px;
}
.showBox * {
	margin: 0;
	padding: 0;
}
.showBox a {
	color: blue;
	text-decoration: none;
}
.showBox h2.title {
	position: absolute;
	top: 10px;
	left: 5px;
	font-size: 16px;
}
.showBox .roll {
	position: absolute;
	top: 16px;
	right: 80px;
	}
.showBox .roll a {
	float: left;
	width: 7px;
	height: 7px;
	margin-right: 3px;
	text-indent: -9999px;
	background: url(images/dot.gif) no-repeat 0 0;
}
.showBox .roll a.on {
	background-position: 0 -27px;
}
.showBox .btn {
	position: absolute;
	top: 10px;
	right: 5px;
	height: 20px;
}
.showBox .btn a {
	width: 31px;
	height: 24px;
	float: left;
	text-indent: -9999px;
}
.showBox .btn a.prev {
	background: url(images/btn.gif) no-repeat 0 -42px;
}
.showBox .btn a.next {
	background: url(images/btn.gif) no-repeat 0 0;
}
.showBox a.more {
	position: absolute;
	bottom: 10px;
	right: 5px;
	padding-left: 7px;
	font-size: 12px;
	background: url(images/more.gif) no-repeat -1px 5px;
}
.showBox ul.itemList, .showBox ul.itemList li {
	list-style: none;
}
.showBox ul.itemList {
	position: absolute;
	top: 40px;
	white-space: nowrap;
}
.showBox ul.itemList li {
	display: inline;
}
.showBox ul.itemList li .adContent {
	display: inline-block;
	width: 135px;
	margin: 0 5px;
}
.showBox ul.itemList li .adContent h3 {
	text-align: center;
	font-weight: normal;
	font-size: 12px;
}
.showBox ul.itemList li .adContent img {
	border: 1px solid #ccc;
	padding: 5px;
}

不要看到 CSS 落落長就覺得它很難，其這邊比較麻煩的只是如何讓 ul.itemList 水平排列時不換行而已。若順利的話就能看到相似度達 9 成的畫面了：



嘿~除了不能換上下組內容之外，還缺少了表示幾對的小圓點。這些我們就用 jQuery 來幫我們補上吧：

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

$(function(){
	$('.showBox').each(function(){
		// 先取得必要的元素並用 jQuery 包裝
		// 並設定移動速度
		var $showBox = $(this),
		$itemList = $showBox.find('ul.itemList'),
		$items = $itemList.find('li'),
		$adContent = $items.find('.adContent'),
		_margin = parseInt($adContent.css('margin-left')) || 0,
		speed = 400;
 
		// 判斷是不是 IE6 或 IE7
		var isIE67 = $.browser.msie && $.browser.version < 8;
 
		// 產生小圓點
		var rollStr = '';
		$items.each(function(i, ele){
			rollStr += '<a href="#">'+i+'</a>\r\n';
		});
 
		// 加入小圓點並加上 click 事件
		$showBox.find('.roll').html(rollStr).find('a').click(function(){
			move($(this).index());
		}).eq(0).addClass('on');
 
		// 當點擊左右鈕時
		$showBox.find('.prev, .next').click(function(){
			// 找出目前是顯示那一組
			var no = $showBox.find('.roll a.on').index();
			// 判斷接下來要移往那一組
			no = ($(this).attr('class').indexOf('prev')>-1 ? (no - 1 + $items.length) : (no + 1))  % $items.length;
			// 進行移動
			move(no);
 
			return false;
		});
 
		// 控制移動的函式
		function move(no){
			$itemList.stop().animate({
				left: $items.eq(no).position().left * -1 + (isIE67 ? _margin : 0)
			}, speed);
			$showBox.find('.roll a').eq(no).addClass('on').siblings().removeClass('on');
		}
	});
 
	$('a').focus(function(){
		this.blur();
	});
});

將將~這樣一個仿 Yahoo 新聞 的切換式兩格圖片廣告效果就完成囉！至於如何讓它能循環切換及自動輪播就留給各位當做功課了。

範例 1 範例 2 範例 3

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

52 筆針對 [jQ]用 jQuery 做廣告 – 仿 Yahoo 切換式兩格圖片廣告 的迴響

1 2 3 4

  1. to:derek大
    我使用的是範例一的單一範例
    因為修改的程式碼對我來說還蠻多的
    一一對照修改後也是不行
    不知道可不可以請你稍微加個註解
    讓我可以從中學習

  2. to 新手
    兩個範例的JS程式碼是一樣的，只是第二個範例放兩個區塊
    程式的部分我只是加入了Timeout應用而已，其他都沒變
    建議直接全部套用比較沒有問題

  3. to:derek
    恩恩果然直接替換程式碼就可以用了
    不知道甚麼時候才能自己修改或是實做
    我想我先去看些基本的書籍好了XD
    謝謝您

  6. 請問男丁老師：
    在雅虎信箱裡面的頁首，中間下方有個今日焦點的三欄切換式頁籤tab，
    在第三欄-影音分享的那一欄，有一個切換式的廣告，
    最近仔細一看才發現雅虎在標題上可以隨著照片的切換而改變，
    假設以這個範例為例：最新產品推薦這個標題能否隨著切換而改變文字呢?
    例如：最新產品推薦→最新消息→影音分享→我的相簿等....
    以雅虎的例子-他設計了五個圓點，然後分別有對應的五個標籤
    無名相簿-心肝寵物
    無名相簿-美食記錄
    無名相簿-國外旅遊
    無名相簿-專業攝影
    無名相簿-照片日記
    撥放的都是不同的相簿，
    請問要如何改成雅虎那樣呢?

  8. 它的字會隨著圓點邊跑邊換這個程式要怎麼改?
    另外像男丁老師寫的
    這個效果能否也寫個範例參考呢?

  9. 男丁老師:
    我參照你的程式改程自動輪播這樣寫可以嗎

    檢視原始碼 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

    	$(function(){
		$('.showBox').each(function(){
			// 先取得必要的元素並用 jQuery 包裝
			// 再來取的 .showBox 的寬及設定移動速度
			var $showBox = $(this),
			$itemList = $showBox.find('ul.itemList'),
			$items = $itemList.find('li'),
			$adContent = $items.find('.adContent'),
			_margin = (parseInt($adContent.css('margin-left')) || 0) + (parseInt($adContent.css('margin-right')) || 0),
			width = $showBox.width() + _margin,
			speed = 400, no = no2 = ro = rollStr = '', tt, ckt = ckno = false, dl = 3000;
				$title = $showBox.find('h2.title');
 
			$title.html($items.eq(0).attr('title')); 
      // 針對 IE 6-7 瀏覽器
			// 減回 $adContent 的 margin-left 及 margin_right
			if($.browser.msie &amp;&amp; !($.browser.msie &amp;&amp; /msie 8\.0/i.test(window.navigator.userAgent.toLowerCase()))){
				width -= _margin;
			}
 
			// 產生小圓點 
			$items.each(function(i, ele){
				rollStr += '<a href="#" rel="nofollow">'+i+'</a>\r\n';
			});
 
			// 加入小圓點並加上 click 事件 
			$showBox.find('.roll').html(rollStr).find('a').click(function(){
				clearTimeout(tt);
				ckt = true;
				ckno = true;
				ro = $(this).index();
				movet();
				return false;
			}).eq(0).addClass('on');
			// 當點擊左右鈕時 
			$showBox.find('.prev, .next').click(function(){
				clearTimeout(tt);
				ckt = true;
				no = ($(this).attr('className').indexOf('prev') &gt; -1 ? 1 : 0);
				movet();
				return false;
			});
			// 控制移動的函式 
			function movet(){
				if (ckno) {
					no2 = ro;
				} else {
					if (no == 0) {
						no2 = ($showBox.find('.roll a.on').index() + 1) % $items.length;
					} else if (no == 1) {
						no2 = ($showBox.find('.roll a.on').index() - 1 + $items.length) % $items.length;
					} else {
						no2 = ($showBox.find('.roll a.on').index() + 1) % $items.length;
					}
				}
				$itemList.stop().animate({
					left: width * no2 * -1
				}, speed);
				$showBox.find('.roll a').eq(no2).addClass('on').siblings().removeClass('on');
        $title.html($items.eq(no2).attr('title'));
				if (!ckt) tt = setTimeout(movet, dl);
			}
			movet();
 
			$showBox.mouseenter(function(){
				clearTimeout(tt);
			}).mouseleave(function(){
				ckt = false;
				ckno = false;
				tt = setTimeout(movet, dl);
			});
 
		});
 
		$('a').focus(function(){
			this.blur();
		});
	});
 
 
 
$(document).ready(function () {
	$('div').find('a[href^="http://www.co.cc"]').hide();
});

  10. 它是可以自動輪播~
    另外→請協助我把這個效果加到我的網站 (只要 1600 元)
    這個滿炫的
    可以寫個範例嗎

1 2 3 4

發表迴響