Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 左右水平廣告輪播

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

筆者此次要教的範例是把上一次的「上下垂直選項式廣告輪播」改成左右水平的移動，同時還想要把按鈕移動到置中的位置。

這次的 HTML 比上一個少了 #player 的區塊：

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

<body>
	<div id="abgneBlock">
		<ul class="list">
			<li><a target="_blank" href="#"><img src="images/01.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/02.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/03.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/04.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/05.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

#abgneBlock {
	width: 940px;
	height: 279px;
	position: relative;
	overflow: hidden;
	border: 1px solid #ccc;
}
#abgneBlock ul.list {
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	width: 9999px;
	height: 100%;
}
#abgneBlock ul.list li {
	float: left;
	width: 940px;
	height: 100%;
}
#abgneBlock .list img{
	width: 100%;
	height: 100%;
	border: 0;
}
#abgneBlock ul.playerControl {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	bottom: 5px;
	right: 5px;
	height: 14px;
}
#abgneBlock ul.playerControl li {
	float: left;
	width: 23px;
	height: 14px;
	cursor: pointer;
	margin: 0px 2px;
	background: url(images/rect_ctrl.png) no-repeat 0 0;
}
#abgneBlock ul.playerControl li.current { 
	background-position: -23px 0;
}

最後就是請出 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

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $block 的高度及設定動畫時間
	var $block = $('#abgneBlock'),
		$slides = $('ul.list', $block),
		_width = $block.width(),
		$li = $('li', $slides),
		_animateSpeed = 600;
 
	// 產生 li 選項
	var _str = '';
	for(var i=0, j=$li.length;i<j;i++){
		// 每一個 li 都有自己的 className = playerControl_號碼
		_str += '<li class="playerControl_' + (i+1) + '"></li>';
	}
 
	// 產生 ul 並把 li 選項加到其中
	// 並幫 li 加上 mouseover 事件
	$('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).css('left', function(){
		// 把 .playerControl 移到置中的位置
		return (_width - $(this).width()) / 2;
	}).find('li').mouseover(function(){
		var $this = $(this);
		$this.addClass('current').siblings('.current').removeClass('current');
		// 移動位置到相對應的號碼
		$slides.stop().animate({
			left: _width * $this.index() * -1
		}, _animateSpeed);
 
		return false;
	}).eq(0).mouseover();
});

其中 .playerControl 的在置中的 left 座標是透過簡單的計算：

檢視原始碼 JavaScript
1

(#abgneBlock 的寬 - .playerControl 的寬) / 2

接著只要當滑鼠移到 .playerControl 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

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $block 的高度及設定動畫時間
	var $block = $('#abgneBlock'),
		$slides = $('ul.list', $block),
		_width = $block.width(),
		$li = $('li', $slides),
		_animateSpeed = 600, 
		// 加入計時器, 輪播時間及控制開關
		timer, _showSpeed = 3000, _stop = false;
 
	// 產生 li 選項
	var _str = '';
	for(var i=0, j=$li.length;i<j;i++){
		// 每一個 li 都有自己的 className = playerControl_號碼
		_str += '<li class="playerControl_' + (i+1) + '"></li>';
	}
 
	// 產生 ul 並把 li 選項加到其中
	var $playerControl = $('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).css('left', function(){
		// 把 .playerControl 移到置中的位置
		return (_width - $(this).width()) / 2;
	});
 
	// 幫 li 加上 click 事件
	var $playerControlLi = $playerControl.find('li').click(function(){
		var $this = $(this);
		$this.addClass('current').siblings('.current').removeClass('current');
 
		clearTimeout(timer);
		// 移動位置到相對應的號碼
		$slides.stop().animate({
			left: _width * $this.index() * -1
		}, _animateSpeed, function(){
			// 當廣告移動到正確位置後, 依判斷來啟動計時器
			if(!_stop) timer = setTimeout(move, _showSpeed);
		});
 
		return false;
	}).eq(0).click().end();
 
	// 如果滑鼠移入 $block 時
	$block.hover(function(){
		// 關閉開關及計時器
		_stop = true;
		clearTimeout(timer);
	}, function(){
		// 如果滑鼠移出 $block 時
		// 開啟開關及計時器
		_stop = false;
		timer = setTimeout(move, _showSpeed);
	});
 
	// 計時器使用
	function move(){
		var _index = $('.current').index();
		$playerControlLi.eq((_index + 1) % $playerControlLi.length).click();
	}
});

除了自動輪播之外，筆者還把切換廣告的事件改成用 .click()，及把選單改成圓點的樣式：

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

#abgneBlock ul.playerControl li {
	float: left;
	width: 10px;
	height: 10px;
	cursor: pointer;
	margin: 0px 2px;
	background: url(images/cir_ctrl.png) no-repeat -10px 0;
}
#abgneBlock ul.playerControl li.current { 
	background-position: 0 0;
}

至於是想要用點擊(click)或是當滑鼠移入(mouseover)到選單來判斷切換廣告的時機，這就由各位自行選擇囉！

範例 1 範例 2 範例 3

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

108 筆針對 [jQ]用 jQuery 做廣告 – 左右水平廣告輪播 的迴響

1 2 3 4 5 6 7

  1. 但是swf會將圈圈的控制按鈕給遮住，但效果依然存在，
    我使用z-index 也好像也無法將圈圈的按鈕移置最上層，
    請問老師是要從jv下去做調整嗎?

  4. 感謝您的這個範例 超好用的 使用上想請教如果要修改成跑到最後一張之後 再從最一張跑回來 而不是直接回到第一張 就像是 1->2->3->2->1->2->3 這樣子的撥放法如何作修改
    謝謝~

  7. 請問男老師（嗯？） 😀

    我用了之後，在 ie8瀏覽器中，
    圖片會播放時會有點 lag，頓頓的，
    在 ie6, ie7, fx 都沒有這個問題。

    套到自己寫的頁面中，感覺 lag 更嚴重了，請問有人遇到這種問題嗎??!!!
    同頁面中，我也加了一支用這個改的↓下拉選單
    http://www.open-lib.com/Lib/1184.jsp

    結果好像衝到了，下拉選單在ie8變超慢的，
    不好意思，不知道提供這些資訊，
    夠不夠讓您有足夠訊息可以回答我的問題呢??!!!

    謝謝你，你的網站讓我獲益良多!!! :DDD

  9. 想問問老師~

    如果想每個小按鈕也有不同的icon, 那該怎樣弄?
    我試過修改但不成功, 老師可以教教嗎?

1 2 3 4 5 6 7

發表迴響