Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 仿 POPO 原創市集廣告展示

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

因為小神童我才知道在台灣有個讓有志成為作家能人大展文筆的平台 - POPO 原創市集。不過我會進去網站逛逛重點通常都是擺在看看一些網頁效果而已，像是今天要分享的

它把控制廣告切換的控制項跟要顯示的標題放一起，整個效果還蠻新鮮有趣的。POPO 原創市集 是搭配 jQuery Cycle Plugin 來使用的，雖然說要仿它的效果，但若用一樣的套件就感覺是真的"仿"了。所以筆者一樣是教各位如果在不使用外掛的情況下來實做囉！

一樣是使用基本的 ul li 當廣告清單囉(圖片一樣是從梅干那邊借來的)：

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

<body>
	<div id="abgne-block-20111227">
		<ul class="lists">
			<li><a href="#"><img alt="三星~SunsangNX200" src="images/sunsangNX200_01.jpg" /></a></li>
			<li><a href="#"><img alt="3吋的AMOLED液晶顯示螢幕" src="images/sunsangNX200_06.jpg" /></a></li>
			<li><a href="#"><img alt="梅干看到這個彎曲的橋墩，感覺相當的有律動感" src="images/sunsangNX200_08_0s.jpg" /></a></li>
			<li><a href="#"><img alt="仿義式建築，還有假天空" src="images/sunsangNX200_09s.jpg" /></a></li>
			<li><a href="#"><img alt="哈哈~美味的鬆餅加梅干最愛的草莓與奇異果" src="images/sunsangNX200_21s.jpg" /></a></li>
			<li><a href="#"><img alt="只要有ShowGirl之處，周遭就圍著滿滿的人" src="images/sunsangNX200_30s.jpg" /></a></li>
			<li><a href="#"><img alt="什麼!!看了圖片就想去下訂買車啊!!" src="images/SAM_7833.jpg" /></a></li>
		</ul>
	</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

#abgne-block-20111227 {
	width: 600px;
	height: 400px;
	position: relative;
	overflow: hidden;
}
#abgne-block-20111227 ul, #abgne-block-20111227 ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#abgne-block-20111227 .lists {
	height: 100%;
	position: relative;
	overflow: hidden;
}
#abgne-block-20111227 .lists img {
	width: 100%;
	height: 100%;
	border: none;
}
#abgne-block-20111227 .controls {
	width: 100%;
	height: 35px;
	position: absolute;
	bottom: 0;
	font-size: 13px;
	z-index: 2;
}
#abgne-block-20111227 .controls li {
	float: left;
}
#abgne-block-20111227 .controls li a {
	display: block;
	width: 44px;	/* 寬度會影響未放大前顯示的字數 */
	height: 35px;
	line-height: 35px;
	margin-right: 1px;
	text-align: center;
	background: #000;
	color: #fff;
	text-decoration: none;
}
#abgne-block-20111227 .controls li.selected a {
	background: #87bf00;
}

.controls 是用來控制切換用的，這部份我們一樣是用 jQuery 依 li 數量來產生相對應數量的項目：

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

$(function(){
	// 先取得相關區塊及塊的高
	// 並取得 li
	var $block = $('#abgne-block-20111227'), 
		_blockHeight = $block.height(), 
		$list = $block.find('li'), 
		_liOpacity = 0.8, 
		_animateSpeed = 400, 
		_selectedIndex = 0;
 
	// 產生下方控制用的 ul li
	var $controls = $('<ul class="controls"></ul>'), 
		_li = '';
	$list.each(function(i){
		var $this = $(this).css({
				position: 'absolute',
				top: i==_selectedIndex ? 0 : _blockHeight,
				zIndex: i==_selectedIndex ? 1 : 0, 
				display: i==_selectedIndex ? 'block' : 'none'
			}), 
			$a = $this.find('a');
 
		_li += '<li><a href="'+$a.attr('href')+'">'+$a.find('img').attr('alt')+'</a></li>';
	});
	// 幫 li 加上透明度
	// 並計算 li 基本寬度及最大寬度
	var $li = $controls.html(_li).appendTo($block).find('li').css('opacity', _liOpacity), 
		_liWidth = $li.width(), 
		_selectedWidth = $block.width() - ($li.length - 1) * _liWidth - 1;
 
	// 當滑鼠移到 li 上時
	$li.mouseover(function(){
		var $this = $(this), 
			_index = $this.index();
 
		// 如果現在移上去的跟已顯示是的同一個就跳過
		if(_selectedIndex == _index) return;
 
		// 進行動畫切換
		$list.eq(_index).stop(true, true).css({
			top: _blockHeight, 
			zIndex: 1, 
			display: 'block'
		}).animate({
			top: 0
		}, _animateSpeed).end().eq(_selectedIndex).stop(true, true).animate({
			top: -_blockHeight
		}, _animateSpeed, function(){
			$(this).hide();
		});
 
		// 把滑鼠移上去的 li 寬度變成最大寬度
		// 並將上一個最大寬度的 li 寬度變成基本寬度
		//$this.addClass('selected').find('a').width(_selectedWidth).end().siblings('.selected').removeClass('selected').find('a').width(_liWidth-1);
		$this.addClass('selected').find('a').width(_selectedWidth);
		$li.eq(_selectedIndex).removeClass('selected').find('a').width(_liWidth-1);
 
		_selectedIndex = _index;
	}).eq(_selectedIndex).addClass('selected').find('a').width(_selectedWidth);
});

這邊大部份的一些寬度等數值都是用程式計算出來的，所以就算在原本的 ul 中新增 li 也可以不改程式正常運作滴~

這範例比較特別的是它的切換移動方式，不管移到那張都是會接在前一張一起移動的唷！如果想再加上自動輪播的功能時，再補上一段計時器的控制就可以了：

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

// 用 speed 表示切換輪播的速度
var timer, speed = 1000;
 
// 用來自動輪播使用
function auto(){
	var _index = (_selectedIndex + 1) % $li.length;
	$li.eq(_index).mouseover();
 
	timer = setTimeout(auto, speed + _animateSpeed);
}
 
$block.hover(function(){
	// 當滑鼠移入時, 停止計時器
	clearTimeout(timer);
}, function(){
	// 當滑鼠移出時, 啟動計時器
	timer = setTimeout(auto, speed);
});
 
// 啟動計時器
timer = setTimeout(auto, speed);
範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
往下、左及右自動輪播移動 會員限定

39 筆針對 [jQ]用 jQuery 做廣告 – 仿 POPO 原創市集廣告展示 的迴響

1 2

  5. 請教一下

    因為不大喜歡間隔 所以將css中的margin的值給移除了

    雖然按鈕因此得以靠在一起 不過最右邊卻多了一塊空缺...

  7. 哈摟 男丁大,

    想請問一下如果在頁面中,有兩個abgne-block-20111227 , js裡的數量判斷有辦法改寫嗎？

    • 可以將 id 改成用 class 的方式, 然後用 .each() 來做判斷處理!
      如果不會修改的話, 可以改成不同的 id, 然後 js 複製兩段!

1 2

發表迴響