男丁格爾's 脫殼玩

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

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

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

檢視原始碼 HTML

<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

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

$(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

$(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 下一頁 »

M 於 2012-01-10 16:21:46 說：

你好，我有個問題，想要結合淡入淡出以及翻轉式選單
希望平時是淡入淡出，滑過時會有翻轉的特效，而這樣的圖片會有很多個，都要做這樣的動作
這部分我修改的是將div改成ul跟li，將您的兩個程式套在一起時，是可以運作的，但是他只會輪播一次，並不會循環，就停掉了，想請問是因為修改成li導致的嗎?有什麼解決方法呢? 謝謝

以下是我的html

CSS

#abgne_fade_pic li{
float:left;

}

#abgne_fade_pic li a{
display:block;
height:500px;
line-height:16px;
text-indent:-9999px;
}

#abgne_fade_pic a#v1a{
background:url(g01.jpg);
width:500px;
}

#abgne_fade_pic a#v1b{
background:url(g02.jpg);
width:500px;
}

登入後再回覆
M 於 2012-01-10 16:23:27 說：

抱歉不知道爲什麼html沒有顯示出來

謝謝

登入後再回覆
- 男丁格爾於 2012-01-10 16:30:51 說：
  
  這要看你的網頁才知道問題在那!!
  
  登入後再回覆
M 於 2012-01-11 10:05:31 說：

已將檔案寄至老師的信箱,另外想請問討論區目前是否開放?
謝謝

登入後再回覆
- 男丁格爾於 2012-01-11 16:18:52 說：
  
  已修改並回覆給你了。討論區暫時是不會開放!!
  
  登入後再回覆
M 於 2012-02-20 13:52:03 說：

你好
我想要請問當滑鼠 click時可以不要自動輪撥
滑鼠離開時在自動輪撥

登入後再回覆
- 男丁格爾於 2012-02-20 16:22:37 說：
  
  我把全部的範例都更新了, 你再試看看!
  
  登入後再回覆
nonotgfd 於 2012-04-14 00:46:16 說：

男丁大大!!

請問一下:

如何把數字移除掉呢?! 不要顯示數字其他功能都正常這樣可以嗎?

感謝!!

登入後再回覆
- 男丁格爾於 2012-04-16 20:45:52 說：
  在 CSS 那邊多新增一句隱藏語法就可以囉~
  
  檢視原始碼 CSS
  1 2 3
  .control { display: none; }
  登入後再回覆
mego 於 2012-04-14 15:15:08 說：

男丁老師
我用ie7、ie8、chrome瀏覽器，
發現在頁碼按鈕上按來按去後，時間會亂跳，變得沒有規律，時慢時快

例如：目前已撥到號碼 " 3 "，這時我按到 " 1 " ，圖片順利輪播至第一張沒錯，
但卻很快的就撥到"2"，這速度跟我們設得秒速不太一樣，
再請男丁老師看一下喔。
感謝。

登入後再回覆
- 男丁格爾於 2012-04-16 21:51:06 說：
  
  這問題應該是在輪播速度比淡入速度還慢時才會發生, 現在修改後應該 ok 哩~
  
  登入後再回覆
Owen 於 2012-04-16 15:36:25 說：

其实这插件还是有个漏洞的，当你把点击页码按钮事件换成你注释的mouseovers事件时，动画停止了。出现了这个bug

登入後再回覆
- 男丁格爾於 2012-04-16 21:56:38 說：
  
  會有怎樣的 bug?你試著是第幾個範例?
  
  登入後再回覆
  - Owen 於 2012-04-17 13:47:31 說：
    
    我直接用的是上面写的代码，没有用案例里面的
    
    登入後再回覆
    - 男丁格爾於 2012-04-17 14:46:22 說：
      
      現在再試也是一樣嗎?程式代碼有修改過了~
      
      登入後再回覆
      - vivitao 於 2012-04-19 11:04:30 說：
        
        您好,我也遇到同樣問題,剛下載您目前的範例0023_2,修改為mouseover, 就無法自動播放了, 只能靠mouseover去切換
      - 男丁格爾於 2012-04-21 11:48:51 說：
        
        當你改成 mouseover 後, 在 autoClick 函式中的是否有一起改呢?
        
        檢視原始碼 JavaScript
        1
        $controlA.eq(showIndex).click();
        
        也要改成
        
        檢視原始碼 JavaScript
        1
        $controlA.eq(showIndex).mouseover();
wind 於 2012-04-29 01:13:00 說：

老師您好我用你的方法練習...圖片不會重疊..他垂直排下來的
position: absolute我有設這個請問是為什麼阿...

登入後再回覆
- 男丁格爾於 2012-05-02 20:45:47 說：
  
  這還要看你其它 css 及 html 設定哩~
  
  登入後再回覆
PING 於 2012-05-20 22:46:04 說：

如果想要增加到4~5張圖片要怎麼改呢? 謝謝

登入後再回覆
- 男丁格爾於 2012-05-21 09:36:20 說：
  
  不就是依我範例中的 div 中加入超鏈結+圖片就可以了嗎?!
  
  登入後再回覆
ManTon 於 2012-05-25 11:46:17 說：

如果想要第一張圖就淡入怎麼做呢? 由黑底淡入

登入後再回覆
- 男丁格爾於 2012-05-25 20:25:43 說：
  
  那你可能要把程式中關於先把其它圖片的變成透明的後面那段拿掉
  
  登入後再回覆