Home » jQuery 應用

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

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

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

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

檢視原始碼 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 來讓圖片能疊在一起：

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

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 做廣告 – 淡入淡出式的切換影像 的迴響

1 2 3 4 5 6 7 8 9 10

  1. 您好，先感謝您分享此程式碼
    我使用上大致沒問題，但是不曉得為什麼我每切換一張圖片圖片會往右偏移1px
    不曉得是什麼原因

  2. 男丁大帥哥，這支程式真是解決了我連月的苦惱
    好想向您下跪Q\\\\\\\\\Q
    不過小的遇到一個小問題...就是該如何讓整個輪播廣告置中?
    我不曉得語法該寫在哪...Orz
    煩請解惑，感謝您一百次、一千次、一萬次!!!)叩頭

  3. 謝謝男丁哥回覆
    雖然置中還是失敗XD
    不過沒關係因為我的網頁有框架
    我把這個輪播設成和框架一樣大就解決了XD
    也感謝前面男丁哥回覆如何改數字按鈕的方法
    我還順便調了SIZE，現在看起來很OK^^
    再次感謝♥

  4. 男丁大大，請問一下http://www.brotzeit.co/這個網頁像似flash的動畫是怎麼寫出來的？
    麻煩幫我解析一下，感激不盡啊^^

  5. 男丁大大你好,這個效果太好用喇,超強的.
    但我有個小問題,在淡入淡出的期間若滑鼠進入了圖片停止了時間,
    之後滑鼠移去其他方,時間器繼續, 當中會突然跳去第中間的一張圖片,
    請問怎樣解決?

    • 這是可以啦, 但整個判斷會比較麻煩。
      當滑鼠移到區塊上時, 停止了輪播的計時器, 但這時候你可以啟動另一個用來監測是否有按下的計時器。
      若時間到並沒有按下任何小圖時, 自動再度啟動輪播計時器。

  10. 不好意思~請問一下我使用了此範例後，因為圖片是.png格式，導致他的透明度切換會出現問題，目前發現在是只有在ie8看才會有半透明區域失效(成黑色狀)，除了圖片改為.jpg格式還其他有辦法解決嗎?謝謝唷QQ

1 2 3 4 5 6 7 8 9 10

發表迴響