Home » jQuery 應用

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

[ 日期： | 瀏覽：34,623 | 迴響：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. 您好，我是在研究此範例時，剛好有看到"請協助我把這個效果加到我的網站 (只要 1600 元)" 這個功能，yahoo也有，我想請問的是，這效果該如何達到呢?
    若在該區塊寫上mouse on事件，show出div，那個div不會把其他版面擠下去嗎~

  2. 恩...請問按鈕的圖示該如何製作?我的都只能顯示一邊而已,就算我完整的圖做好(不管有沒有切割左右兩邊)還是都只能跑出一邊...

    • 主要修改 css 及 html 排版就可以了。
      現在我是每一個 li 中放了兩個 a.adContent, 你只要留一個然後再調整 css 應該就行了。應該...

    • 直的話...沒特別試過, 不過依那時寫的 html 及 css 來看, 看來是要改不少小地方。
      改天有時間再弄一個垂直版的~

  7. 老師你好我想請問若我H3的字數很多~把display設為block~就無法看了~是為什麼呢?有沒有解決的辦法?謝謝

1 2 3 4

發表迴響