Home » jQuery 應用

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

[ 日期： | 瀏覽：63,531 | 迴響：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

  2. to vampire
    剛測試過你使用的jQuery程式庫有問題，建議直接更新為1.4.2版本
    而且你調用過多的jQuery程式庫，可能是插件的調用，試著到後台插件設定進行關閉，或修改插件程式將其多餘的jQuery程式庫拿掉

  3. 我有試著拿掉一些程式庫..
    可是不管拿掉哪一個都會影響到其他的功能..

    所以我不知道到底該怎麼整合或是換到哪一個才會正常..QQ

  4. 感謝各位大大的指點.. 我已經修正好了＠＠

    不過另外又有個問題.. 那個小圓點按鈕 css要改哪邊才會再中間不是右邊..

    還有要改哪邊才是滑鼠點下去才會移動圖片而不是滑鼠移過就移動圖片呢？

  8. 謝謝男丁!這個範例真是太棒了!
    現在遇到一個困難,我所有網頁的字型都是 big5 ,改了之後就完成看不到了,如果用 utf-8 ,則文字就變成亂碼了,怎麼辦...救命呀~

  10. 請問老師，這個上下輪播的方式，可以把控制的圓點放在圖片框的下面嗎？
    因為我試過好像沒辦法把圖遮起來，只剩控制圓點再圖框下面。可不可以請老師幫我看一下，我想要做像這個網頁中間下面產品左右平移，控制點在下面，改成產品上下移動，控制點也在下面，謝謝老師！http://www.taidoc.com/2011/index.html

1 2 3 4

發表迴響