Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 左右水平廣告輪播-附加號碼鈕

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

基本上廣告的滑動效果作法都是大同小異，會有差別的是在樣式及功能上的改變。像有同學就問到說是否能把「左右水平廣告輪播」的下方加上號碼鈕，甚至還希望多加一對能切換上下張圖片的鈕。

筆者就稍微修改一下 HTML：

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

<body>
	<div id="abgne-block-20110317">
		<div class="abgne-player">
			<ul class="abgne-list">
				<li><a target="_blank" href="#"><img src="images/a.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/b.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/c.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/d.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/e.jpg"></a></li>
			</ul>
		</div>
		<div class="abgne-control">
			<ul class="arrows"> 
				<li class="prev">&lt;</li> 
				<li class="next">&gt;</li> 
			</ul>
		</div>
	</div>
</body>

這便會發現多了一個新的 .abgne-control 區塊，裡面除了目前看到用來控制上下張的鈕之外，等等還會利用 jQuery 來動態產生相對應數量的號碼鈕清單。

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

ul, li {
	padding: 0;
	margin: 0;
	list-style: none;
}
#abgne-block-20110317 {
	width: 720px;	/* 圖片的寬 */
	height: 250px;	/* 圖片的高 + 30 */
	border: 10px solid #ddd;
}
.abgne-player {
	width: 720px;	/* 圖片的寬 */
	height: 220px;	/* 圖片的高 */
	position: relative;
	overflow: hidden;
}
.abgne-player ul.abgne-list {
	position: absolute;
	width: 9999px;
	height: 100%;
}
.abgne-player ul.abgne-list li {
	float: left;
	width: 720px;	/* 圖片的寬 */
	height: 100%;
}
.abgne-player ul.abgne-list img{
	width: 100%;
	height: 100%;
	border: 0;
}
.abgne-control {
	height: 24px;
	padding: 3px;
	color: #fff;
	font-size: 13px;
	background: #333;
}
.abgne-control ul {
	float: left;
}
.abgne-control ul li {
	float: left;
	padding: 0 5px;
	line-height: 20px;
	margin: 2px;
	background: #666;
	cursor: pointer;
}
.abgne-control ul.numbers {
	margin-left: 13px;
}
.abgne-control ul li.current {
	background: #fff;
	color:#000;
}
.abgne-control ul li.hover {
	background: #fff;
	color:#000;
}

至於 CSS 的部份只是針對 .abgne-control 的部份來排版用。除了號碼鈕之外，目前就能看到半完成的畫面了：



那說好的號碼鈕呢？！別擔心～接著就看咱們的 jQuey 大顯神通：

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

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $block 的高度及設定動畫時間
	var $block = $('#abgne-block-20110317'),
		$slides = $block.find('ul.abgne-list'),
		_width = $block.width(),
		$li = $slides.find('li'),
		$control = $block.find('.abgne-control'),
		_animateSpeed = 600;
 
	// 設定 $slides 的寬(為了不讓 li 往下擠)
	$slides.css('width', ($li.length + 1) * _width);
	// 產生 li 選項
	var _str = '';
	for(var i=0, j=$li.length;i<j;i++){
		// 每一個 li 都有自己的 className = playerControl_號碼
		_str += '<li class="abgne-player-control_' + (i+1) + '">' + (i+1) + '</li>';
	}
 
	// 產生 ul 並把 li 選項加到其中
	var $number = $('<ul class="numbers"></ul>').html(_str).appendTo($control), 
		$numberLi = $number.find('li');
 
	// 並幫 .numbers li 加上 click 事件
	$numberLi.click(function(){
		var $this = $(this);
		$this.addClass('current').siblings('.current').removeClass('current');
		// 移動位置到相對應的號碼
		$slides.stop().animate({
			left: _width * $this.index() * -1
		}, _animateSpeed);
 
		return false;
	}).eq(0).click();
 
	// 幫 .arrows li 加上 click 事件
	$control.find('ul.arrows li').click(function(){
		var _index = $numberLi.filter('.current').index();
		$numberLi.eq((this.className.indexOf('next')>-1?_index+1:_index-1+$numberLi.length)%$numberLi.length).click();
 
		return false;
	});
 
	// 當滑鼠移到 $control li 上時, 加上 .hover 效果
	// 反之則移除
	$control.find('li').hover(function(){
		$(this).addClass('hover');
	}, function(){
		$(this).removeClass('hover');
	});
});

號碼鈕的數量會隨著 .abgne-list 中的 li 數量而自動的產生，因此使用時就不用再辛苦的自己加上。



若是想讓它能自動輪播的話，則得使用 setTimeout() 等計時器來控制：

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

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $block 的高度及設定動畫時間
	var $block = $('#abgne-block-20110317'),
		$slides = $block.find('ul.abgne-list'),
		_width = $block.width(),
		$li = $slides.find('li'),
		$control = $block.find('.abgne-control'), 
		_animateSpeed = 600, 
		// 加入計時器, 輪播時間及控制開關
		timer, _showSpeed = 3000, _stop = false;
 
	// 設定 $slides 的寬(為了不讓 li 往下擠)
	$slides.css('width', ($li.length + 1) * _width);
	// 產生 li 選項
	var _str = '';
	for(var i=0, j=$li.length;i<j;i++){
		// 每一個 li 都有自己的 className = playerControl_號碼
		_str += '<li class="abgne-player-control_' + (i+1) + '">' + (i+1) + '</li>';
	}
 
	// 產生 ul 並把 li 選項加到其中
	var $number = $('<ul class="numbers"></ul>').html(_str).appendTo($control), 
		$numberLi = $number.find('li');
 
	// 並幫 .numbers li 加上 click 事件
	$numberLi.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();
 
	// 幫 .arrows li 加上 click 事件
	$control.find('ul.arrows li').click(function(){
		var _index = $numberLi.filter('.current').index();
		$numberLi.eq((this.className.indexOf('next')>-1?_index+1:_index-1+$numberLi.length)%$numberLi.length).click();
 
		return false;
	});
 
	// 當滑鼠移到 $control li 上時, 加上 .hover 效果
	// 反之則移除
	$control.find('li').hover(function(){
		$(this).addClass('hover');
	}, function(){
		$(this).removeClass('hover');
	});
 
	// 如果滑鼠移入 $slides 時
	$slides.hover(function(){
		// 關閉開關及計時器
		_stop = true;
		clearTimeout(timer);
	}, function(){
		// 如果滑鼠移出 $block 時
		// 開啟開關及計時器
		_stop = false;
		timer = setTimeout(move, _showSpeed);
	});
 
	// 計時器使用
	function move(){
		$control.find('ul.arrows li.next').click();
	}
});
範例 1 範例 2

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

75 筆針對 [jQ]用 jQuery 做廣告 – 左右水平廣告輪播-附加號碼鈕 的迴響

1 2 3 4 5

  1. 老師我想請問輪播到最後一張圖的時候要回第一張
    要怎麼讓它直接接著第一章圖播，而不是倒退回去這樣的視覺
    要怎麼改呢??

  2. 老師您好我想請問我若是要把左右換頁的箭頭移到圖片的中間，該怎麼做比較好，若是圖片旁要加上表格或是說明文字該如何做呢?

  3. 男丁老師您好：
    有個問題想請教您，
    我將您所提供的 語法
    分別 嵌入 HTML 當中，
    自動播放這個功能&點選按鈕不會跳出下一張圖片的功能皆呈現不出來，
    還有就是我的只會跳出第一張圖片之後layout處皆變為空白，想請問男丁老師
    我是哪個度份出了問題

  4. 男丁老師您好：
    想問您一個問題
    我照內容設定圖片的寬高
    發現圖片高度超過317下方按鈕功能就會失效
    我有試著在IE、FIREFOX及google瀏覽器上測試
    好像只有在goole瀏覽器會有這個問題
    要在哪個地方著手呢

  6. 男丁老師您好…
    想請問一下…使用者用IE瀏灠器會出現
    解除IE封鎖Activex控制項
    必需使用允許...
    請問有辦法不用允許嗎？　感謝 ^^!

    • 你是在本機上執行嗎?若是的話, 當你把程式放到網路上就不會有那訊息了!!
      基本上那是安全性相關的訊息，除非使用者調整瀏覽器的安全性設定，不然無法用程式去隱藏它的!!

  8. 老師您好，
    如果"號碼按鈕"不想要讓他顯示出來的話，
    可以把它給隱藏起來嗎?
    就只是單純存的做圖片的輪播。

  10. 請問男丁老師:
    我覺得 這是很棒的圖片展示方式我是初學者喜歡學習 我自己有能力放到自己的網站的話
    可那去使用嗎? 還需要付您費用嗎?

1 2 3 4 5

發表迴響