Home » jQuery 應用

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

[ 日期： | 瀏覽：63,503 | 迴響：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. 男丁大大..

    很感激您提供這麼多資訊.. 小弟有個疑問.. 不知道 wp 系統有沒有所謂的抽獎模組外掛..或是有什麼獨立的抽獎系統程式.. 我找好久找不到..

  2. 這東東是個好物.. 可惜我還是看不懂如何改成橫向的..
    不知是否可以請男丁大大再講解詳細一點..O_Q

    最後..不知是否可以把輪撥的按鈕改成 apple 官網 iPhone 頁面中圓點點的樣式.. 我有把 apple 的官網抓回來看過..可是他是一張圖片兩種樣式..似乎是靠 css 跟 js 去定位滑鼠移過的變換效果..難懂阿qq..

    話說！ HTC 官網也是這樣的按鈕＠＠

  6. 似乎會跟我原本用的某個語法衝突..
    因為我用乾淨的新檔案製作測試是ok的.. 可是原語法移植到網站上就會出問題

    似乎是程式抓不到 li 的圖片位置..可是我看遍了我的首頁..實在看不出來哪邊衝突qq

  10. 都拿掉試過了＠＠ 還是一樣..

    感覺很像是跟輪撥的文字衝到..
    可是我不懂要怎麼改..

    可以幫幫我嗎？

1 2 3 4

發表迴響