Home » jQuery 應用

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

[ 日期： | 瀏覽：181,052 | 迴響：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. 您好：

    我想請問一下我把它的css修改為w224h332 px，其他參數皆不變。

    也放了相同尺寸的五張圖片，輪播器上面放了一個iphone的png檔，想要展示手機軟體。

    第一二張圖片輪播時，都可以和iphone的螢幕對應到，但是跑到第三張圖片的之後，圖片就會自己往左邊一點，左邊一點點會被上一層iphone的框蓋到，以致右邊會多出空白。（會自己再往左邊一點點位移）

  2. 有個問題想請教南丁格爾大大,我試著跟著你提供的語法來製作廣告,但是playercontrol卻沒有出來,請問這種狀況要如何解決,謝謝!

  3. 感謝男丁老師~ 看了您回答網友的問題~ 終於頓悟了^^

    Q.第一段javaSript $slides.stop().animate，為何在animate前需要增加stop()我把STOP()刪除好像也沒變

    A.動畫會累加, 所以當被重覆觸發時, 希望先停掉未完成的, 直接執行新的動畫

    幫助好大喔!! 謝謝

  4. 你好 我想請問 我該如何將整個輪播廣告 置於網頁的水平中央呢????因為是初學者還不太懂 能否清楚告訴我該怎麼做呢?拜託了謝謝

  5. 老師你好，我把CSS和javascript改成外掛式的，但小圓點卻消失了?!其餘功能都還在?請問是我操作上有問題嗎?

  7. 想請問一下 試著套用老師的原始碼 配著自己的圖 發現按鈕邊邊部噴會跑出白色方框
    想問一下要如何解決? 謝謝!

  8. 您好,無意間由梅問題逛到您的網站, 想請教您這個左右輪播放的效果可以再加上圖片中有title跟著一起顯示嗎? 我嘗試用梅問題方式加入你的script就....哈哈哈,整個不行動了.

  9. 老師您好!!
    想請教,要如何將事件的方格改放到網路上,因為小弟是新手所以不太會敍述
    就是下面這個URL 要怎麼變 SRC可以用
    background: url(images/rect_ctrl.png)
    是直接變成
    background: src(images/rect_ctrl.png)
    可是還是無法使用,請老師指導!!

  10. 老師你好:)想問你一下這篇裡面的JQ語法好像有問題耶......因為套用上去不會輪播 只有一張圖片而已 按鈕也出不來......想問老師該怎麼辦?

1 2 3 4 5 6 7

發表迴響