Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播

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

因為筆者實在沒什麼美術天份，所以範例中都是用很簡單的區塊背景顏色來表示，但很多同學都想要換成自己設計的美美圖示或項目時可能就會遇到一些問題。所以今天的範例中就多加了一些小技巧，讓各位能很簡單的替換成自己的圖片。

一樣是用 ul li 來當廣告項目，其中共有 6 個 li 及圖片(圖片來源：梅問題教學網)：

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

<body>
	<div id="abgneBlock">
		<div id="player">
			<ul class="list">
				<li><a target="_blank" href="#"><img src="images/GoldRedenvelope00.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/laluz00.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/MazingerZ00.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/MetalTableware00.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/RuiShidao00.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/uWang00.jpg"></a></li>
			</ul>
		</div>
	</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

#abgneBlock {
	padding: 5px;
	width: 450px;
	height: 286px;
	border: 1px solid #ccc;
}
#abgneBlock #player {
	position: relative;
	overflow: hidden;
	height: 100%;
}
#abgneBlock ul.list {
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	width: 100%;
	height: 100%;
}
#abgneBlock ul.list li {
	float: left;
	width: 100%;
	height: 100%;
}
#abgneBlock .list img{
	width: 100%;
	height: 100%;
	border: 0;
}

當套上 CSS 後就能看到大概的畫面了：



不過因為限制了區塊的高度，因此只能看到一張廣告圖片而已。所以接下來就用 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

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

我們把選項 ul.playerControl 透過程式來產生並加到區塊中，所以當然得再補上相關的 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

#abgneBlock ul.playerControl {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	bottom: 5px;
	right: 5px;
	height: 20px;
}
#abgneBlock ul.playerControl li {
	float: left;
	color: #ff99cc;
	text-align: center;
	line-height: 20px;
	width: 20px;
	height: 20px;
	font-family: Arial;
	font-size: 12px;
	cursor: pointer;
	margin: 0px 2px;
	background: url(images/control_ico.gif) no-repeat -21px 0;
}
#abgneBlock ul.playerControl li.current { 
	color: #fff;
	font-weight: bold;
	background-position: 0 0;
}

這樣我們就有相對數量的選項，同時可透過這些選項來控制廣告囉：



且因為筆這在產生這些 li 選項時都有給它們特定的 className，所以如果想要自訂選項圖片的話，只要修改 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

#abgneBlock ul.playerControl li {
	color: #ff99cc;
	text-align: center;
	line-height: 20px;
	width: 20px;
	height: 20px;
	font-family: Arial;
	font-size: 12px;
	cursor: pointer;
	margin: 2px 2px;
	text-indent: -9999px;
	background: url(images/control_ico2.gif) no-repeat;
}
#abgneBlock ul.playerControl li.current {
	background-position: 0 -21px;
}
#abgneBlock ul.playerControl li.playerControl_2 {
	background-position: -21px 0;
}
#abgneBlock ul.playerControl li.playerControl_2.current {
	background-position: -21px -21px;
}
#abgneBlock ul.playerControl li.playerControl_3 {
	background-position: -42px 0;
}
#abgneBlock ul.playerControl li.playerControl_3.current {
	background-position: -42px -21px;
}
#abgneBlock ul.playerControl li.playerControl_4 {
	background-position: -63px 0;
}
#abgneBlock ul.playerControl li.playerControl_4.current {
	background-position: -63px -21px;
}
#abgneBlock ul.playerControl li.playerControl_5 {
	background-position: -84px 0;
}
#abgneBlock ul.playerControl li.playerControl_5.current {
	background-position: -84px -21px;
}
#abgneBlock ul.playerControl li.playerControl_6 {
	background-position: -105px 0;
}
#abgneBlock ul.playerControl li.playerControl_6.current {
	background-position: -105px -21px;
}

出來的效果就變的更有...特色！！！



若要加上自動輪播的話，只要再修改一點點程式：

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

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $slides 的高度及設定動畫時間
	var $block = $('#abgneBlock'),
		$slides = $('#player ul.list', $block),
		_height = $slides.find('li').height(),
		$li = $('li', $slides),
		_animateSpeed = 400, 
		timer, _speed = 4000;
 
	// 產生 li 選項
	var _str = '';
	for(var i=0, j=$li.length;i<j;i++){
		// 每一個 li 都有自己的 className = playerControl_號碼
		_str += '<li class="playerControl_' + (i+1) + '">' + (i+1) + '</li>';
	}
 
	// 產生 ul 並把 li 選項加到其中
	// 並幫 li 加上 mouseover 事件
	var $controlLi = $('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).find('li');
	$controlLi.mouseover(function(){
		clearTimeout(timer);
 
		var $this = $(this);
		$this.addClass('current').siblings('.current').removeClass('current');
		// 移動位置到相對應的號碼
		$slides.stop().animate({
			top: _height * $this.index() * -1
		}, _animateSpeed, function(){
			if(!_isOver) timer = setTimeout(moveNext, _speed);
		});
 
		return false;
	}).eq(0).mouseover();
 
	// 當滑鼠移到 $block 時則停止輪播
	// 移出時則繼續輪播
	var _isOver = false;
	$block.mouseenter(function(){
		clearTimeout(timer);
		_isOver = true;
	}).mouseleave(function(){
		_isOver = false;
		timer = setTimeout(moveNext, _speed);
	});
 
	// 用來控制移動的函式
	function moveNext(){
		var _now = $controlLi.filter('.current').index();
		$controlLi.eq((_now+1) % $controlLi.length).mouseover();
	}
});

這樣就有一個能達到廣告效果又能有個人特色的廣告區塊囉。至於要讓廣告是像螃蟹一樣橫著移動的話，只要修改 CSS 樣式及把程式中的 top 改成 left 就可以囉。

範例 1 範例 2 範例 3 範例 4

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

44 筆針對 [jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播 的迴響

1 2 3 4

  1. 親愛的南丁格爾老師:在網路上搜尋到您的語法應用，最近在修改公司的網頁，參考您的網頁教學，十分的受用，非常感謝^^

  3. 很感謝你寫的這篇文章,解決我的問題.
    有個小問題, 就是我在顯示頁碼的這個區塊裡, 對照範例, 頁碼是白字,
    我可以顯示, 但頁碼背後的粉紅底圖我就顯示不出來.我的目錄應沒設錯,
    試了放不同目錄和寫法都還是不行說.

    background: url(images/control_ico.gif) no-repeat -21px 0;

  4. 我將left: _width * $this.index() * -1修改成top: _height * $this.index() * -1，但效果是沒有變成垂直的，請問還需要修改那個部分呢?

  5. 男丁格爾大大~請教一下
    我在同一個頁面中放了兩個該輪播器
    css部分都改成有第二組
    #abgneBlock,#abgneBlock2
    #abgneBlock #player,#abgneBlock2 #player2
    #abgneBlock ul.list,#abgneBlock2 ul.list2
    #abgneBlock ul.list li,#abgneBlock2 ul.list2 li
    #abgneBlock .list img,#abgneBlock2 .list2 img
    #abgneBlock ul.playerControl,#abgneBlock2 ul.playerControl
    HTML部分也是一樣弄了兩組

    Javascript最上面宣告$block和$slides的部分都有把第二組加進去

    但是播放時會因為產生的li的playerControl號碼會是兩組相加的總數...
    所以播完設定好的照片都會輪空到跑完空號的部分才又重新一輪..
    請問一下javascript該怎麼修改才能讓兩組輪播器的號碼各自獨立?

1 2 3 4

發表迴響