Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 淡入淡出式的切換影像

範例 1
範例 2
沒錯!只要 900 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

有同學問到能不能讓圖片的切換效果是溶入的方式?這樣的效果好像在 Flash 上是比較常見的,若真的要用 JavaScript 來做到溶入的話,可是會殺死設計師很多腦細胞的。所以,筆者就取巧的使用淡入淡出的方式來模擬它。

筆者這邊只用很簡單的 HTML 來展示圖片:

1
2
3
4
5
6
7
<body> 
	<div id="abgne_fade_pic"> 
		<a href="http://abgne.tw" class="ad"><img src="g01.jpg" /></a> 
		<a href="#" class="ad"><img src="g02.jpg" /></a> 
		<a href="#" class="ad"><img src="g03.jpg" /></a> 
	</div> 
</body>

接著透過 CSS 把超連結的 position 設成 absolute 來讓圖片能疊在一起:

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
a img {
	border: none;
}
#abgne_fade_pic {
	position: relative;
	width: 500px;
	height: 500px;
	border: 1px solid #ccc;
}
#abgne_fade_pic a.ad {
	position: absolute;	/* 讓圖片疊在一起 */
}
#abgne_fade_pic .control {
	position: absolute;
	right: 10px;
	bottom: 10px;
}
#abgne_fade_pic .control a {
	display: inline-block;
	padding: 3px;
	margin: 0 3px;
	width: 16px;
	color: #fff;
	background: #000;
	text-align: center;
	font-size: 16px;
	text-decoration: none;
}
#abgne_fade_pic .control a.on {
	font-weight: bold;
	color: #f00;
}

再來筆者會用程式去產生出相對應數量的按鈕:

檢視原始碼 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
$(function(){
	var $block = $('#abgne_fade_pic'), 
		$ad = $block.find('.ad'),
		showIndex = 0,			// 預設要先顯示那一張
		fadeOutSpeed = 2000,	// 淡出的速度
		fadeInSpeed = 3000,		// 淡入的速度
		defaultZ = 10;			// 預設的 z-index
 
	// 先把其它圖片的變成透明
	$ad.css({
		opacity: 0,
		zIndex: defaultZ - 1
	}).eq(showIndex).css({
		opacity: 1,
		zIndex: defaultZ
	});
 
	// 組出右下的按鈕
	var str = '';
	for(var i=0;i<$ad.length;i++){
		str += '<a href="#">' + (i + 1) + '</a>';
	}
	var $controlA = $('#abgne_fade_pic').append($('<div class="control">' + str + '</div>').css('zIndex', defaultZ + 1)).find('.control a');
 
	// 當按鈕被點選時
	// 若要變成滑鼠滑入來切換時, 可以把 click 換成 mouseover
	$controlA.click(function(){
		// 取得目前點擊的號碼
		showIndex = $(this).text() * 1 - 1;
 
		// 顯示相對應的區域並把其它區域變成透明
		$ad.eq(showIndex).stop().fadeTo(fadeInSpeed, 1).css('zIndex', defaultZ).siblings('a').stop().fadeTo(fadeOutSpeed, 0).css('zIndex', defaultZ - 1);
		// 讓 a 加上 .on
		$(this).addClass('on').siblings().removeClass('on');
 
		return false;
	}).focus(function(){
		$(this).blur();
	}).eq(showIndex).addClass('on');
});

這樣當使用者去點擊按鈕時就會把目前的圖片做淡出的動作,然後同時把相對應的圖片做淡入,因為圖片都疊一起,所以就會有影像重疊的錯覺出來:



最後如果需要讓它能自動輪播的話,就得再加上 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
$(function(){
	var $block = $('#abgne_fade_pic'), 
		$ad = $block.find('.ad'),
		showIndex = 0,			// 預設要先顯示那一張
		fadeOutSpeed = 2000,	// 淡出的速度
		fadeInSpeed = 3000,		// 淡入的速度
		defaultZ = 10,			// 預設的 z-index
		isHover = false,
		timer, speed = 2000;	// 計時器及輪播切換的速度
 
	// 先把其它圖片的變成透明
	$ad.css({
		opacity: 0,
		zIndex: defaultZ - 1
	}).eq(showIndex).css({
		opacity: 1,
		zIndex: defaultZ
	});
 
	// 組出右下的按鈕
	var str = '';
	for(var i=0;i<$ad.length;i++){
		str += '<a href="#">' + (i + 1) + '</a>';
	}
	var $controlA = $('#abgne_fade_pic').append($('<div class="control">' + str + '</div>').css('zIndex', defaultZ + 1)).find('.control a');
 
	// 當按鈕被點選時
	// 若要變成滑鼠滑入來切換時, 可以把 click 換成 mouseover
	$controlA.click(function(){
		// 取得目前點擊的號碼
		showIndex = $(this).text() * 1 - 1;
 
		// 顯示相對應的區域並把其它區域變成透明
		$ad.eq(showIndex).stop().fadeTo(fadeInSpeed, 1, function(){
			if(!isHover){
				// 啟動計時器
				timer = setTimeout(autoClick, speed + fadeInSpeed);
			}
		}).css('zIndex', defaultZ).siblings('a').stop().fadeTo(fadeOutSpeed, 0).css('zIndex', defaultZ - 1);
		// 讓 a 加上 .on
		$(this).addClass('on').siblings().removeClass('on');
 
		return false;
	}).focus(function(){
		$(this).blur();
	}).eq(showIndex).addClass('on');
 
	$ad.hover(function(){
		isHover = true;
		// 停止計時器
		clearTimeout(timer);
	}, function(){
		isHover = false;
		// 啟動計時器
		timer = setTimeout(autoClick, speed);
	})
 
	// 自動點擊下一個
	function autoClick(){
		if(isHover) return;
		showIndex = (showIndex + 1) % $controlA.length;
		$controlA.eq(showIndex).click();
	}
 
	// 啟動計時器
	timer = setTimeout(autoClick, speed);
});
範例 1 範例 2 範例 3 範例 4

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

174 筆針對 [jQ]用 jQuery 做廣告 – 淡入淡出式的切換影像 的迴響

    • 基本上若失敗的話, 它會提示說是那幾個地方, 我猜應該是 img 後面我都會習慣性的多加一個反斜線吧/

  1. 您好~,img部份我有自行修正(加上alt說明文字)
    錯誤部份是用這個測出來的:http://validator.w3.org/
    您要不要測測看? 因為我真的不曉得該怎麼修正..|||

  2. 謝謝回覆。加 background 好像只能讓它顯示該張圖片時,顯示顏色。
    請問若希望「滑鼠移上去」時變換指定顏色,請問要改哪個部分呢?謝謝!

  3. 男丁大大,用第二範例來改,因為有14張圖片要淡出淡入卻發現有的圖片淡出的速度有的變好快!!
    $(function(){
    var $ad = $('#abgne_fade_pic a.ad'),
    showIndex = 0, // 預設要先顯示那一張
    fadeOutSpeed = 2000, // 淡出的速度
    fadeInSpeed = 3000, // 淡入的速度
    defaultZ = 10, // 預設的 z-index
    isHover = false,
    timer, speed = 7000; // 計時器及輪播切換的速度

  4. —以下為全部的程式碼—- 謝謝男丁大

    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
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    
     
    	a img {
    		border: none;
    	}
    	#abgne_fade_pic {
    		position: relative;
    		width: 760px;
    		height: 560px;
    		/*--border: 1px solid #ccc;--*/
    	}
    	#abgne_fade_pic a.ad {
    		position: absolute;	/* 讓圖片疊在一起 */
    	}
    	#abgne_fade_pic .control {
    		position: absolute;
    		right: 10px;
    		bottom: 12px;
    	}
    	#abgne_fade_pic .control a {
    		display: inline-block;
    		padding: 3px;
    		margin: 0 3px;
    		width: 16px;
    		color: #999999;         /*--數字顏色--*/
    		background: #fff;   /*--方框底色--*/
    		text-align: center;
    		font-size: 13px;
    		text-decoration: none;
     
    	}
    	#abgne_fade_pic .control a.on {
    		font-weight: bold;
    		color: #1200C4;  /*--當張圖片的數字顏色--*/
    	}
     
     
    	$(function(){
    		var $ad = $('#abgne_fade_pic a.ad'),
    			showIndex = 0,			// 預設要先顯示那一張
    			fadeOutSpeed = 2000,	// 淡出的速度
    			fadeInSpeed = 3000,		// 淡入的速度
    			defaultZ = 10,			// 預設的 z-index
    			isHover = false,
    			timer, speed = 7000;	// 計時器及輪播切換的速度
     
    		// 先把其它圖片的變成透明
    		$ad.css({
    			opacity: 0,
    			zIndex: defaultZ - 1
    		}).eq(showIndex).css({
    			opacity: 1,
    			zIndex: defaultZ
    		});
     
    		// 組出右下的按鈕
    		var str = '';
    		for(var i=0;i&lt;$ad.length;i++){
    			str += &#039;<a href="#" rel="nofollow">' + (i + 1) + '</a>';
    		}
    		var $controlA = $('#abgne_fade_pic').append($('' + str + '').css('zIndex', defaultZ + 1)).find('.control a');
     
    		// 當按鈕被點選時
    		// 若要變成滑鼠滑入來切換時, 可以把 click 換成 mouseover
    		$controlA.click(function(){
    			// 取得目前點擊的號碼
    			showIndex = $(this).text() * 1 - 1;
     
    			// 顯示相對應的區域並把其它區域變成透明
    			$ad.eq(showIndex).stop().fadeTo(fadeInSpeed, 1, function(){
    				if(!isHover){
    					// 啟動計時器
    					timer = setTimeout(autoClick, speed);
    				}
    			}).css('zIndex', defaultZ).siblings('a').stop().fadeTo(fadeOutSpeed, 0).css('zIndex', defaultZ - 1);
    			// 讓 a 加上 .on
    			$(this).addClass('on').siblings().removeClass('on');
     
    			return false;
    		}).focus(function(){
    			$(this).blur();
    		}).eq(showIndex).addClass('on');
     
    		$ad.hover(function(){
    			isHover = true;
    			// 停止計時器
    			clearTimeout(timer);
    		}, function(){
    			isHover = false;
    			// 啟動計時器
    			timer = setTimeout(autoClick, speed);
    		})
     
    		// 自動點擊下一個
    		function autoClick(){
    			if(isHover) return;
    			showIndex = (showIndex + 1) % $controlA.length;
    			$controlA.eq(showIndex).click();
    		}
     
    		// 啟動計時器
    		timer = setTimeout(autoClick, speed);
    	});
     
     
     
     
     
    		<a href="film01.htm" rel="nofollow"></a>
    		<a href="film02.htm" rel="nofollow"></a>
    		<a href="film03.htm" rel="nofollow"></a>
            <a href="film04.htm" rel="nofollow"></a>
            <a href="film05.htm" rel="nofollow"></a>
            <a href="film06.htm" rel="nofollow"></a>
            <a></a>
            <a></a>
            <a></a>
            <a></a>
            <a></a>
            <a></a>
            <a></a>
            <a></a>
  5. 你好 我把html裡的
    ......
    外包連結 但是卻發現無法執行了

    放回html裡卻又可以.. 請問該怎麼解決?

  6. 男丁格爾 你好:
    這範例幫了我一個大忙 謝謝
    想請問 如果我想把數字按鈕變成類似MENU選單(文字)的話 需要從哪邊開始下手呢?

發表迴響