男丁格爾'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 下一頁 »

vicky1023 於 2012-07-12 10:48:50 說：

不好意思~雖然很多人問過了，但還是不太清楚該怎麼改~~
如何把數字變成像你的"左右水平廣告輪播"一樣是用圖片方式呢?

登入後再回覆
- 男丁格爾於 2012-07-12 12:24:48 說：
  先找到
  
  檢視原始碼 JavaScript
  1 2 3
  for(var i=0;i<$ad.length;i++){ str += '<a href="#" rel="nofollow">' + (i + 1) + '</a>'; }
  改成
  
  檢視原始碼 JavaScript
  1 2 3
  for(var i=0;i<$ad.length;i++){ str += '<a class="control_menu control_' + (i + 1) + '" href="#" rel="nofollow">' + (i + 1) + '</a>'; }
  這樣你就能利用 css 去一一指定 a.control_1, a.control_2...的背景圖片了。
  登入後再回覆
  - vicky1023 於 2012-07-12 13:12:02 說：
    
    抱歉，大大，我改了沒反應，看了看好像是我沒說清楚，我意思是指下面1.2.3.4變成圓點圖形，而不是數字，不知道你講解的是這意思嗎?
    
    登入後再回覆
    - 男丁格爾於 2012-07-12 13:35:25 說：
      
      如果要是一起變的話就改成
      
      檢視原始碼 JavaScript
      1 2 3
      for(var i=0;i<$ad.length;i++){ str += '<a class="control_menu control_' + (i + 1) + '" href="#" rel="nofollow">' + (i + 1) + '</a>'; }
      
      然後你再仔細看"左右水平廣告輪播"文章的最後部份, 我有幫 li 指定背景圖片。所以這邊你也要幫 .control_menu 指定背景圖片才行~
      
      登入後再回覆
      - vicky1023 於 2012-07-12 15:23:53 說：
        
        在請問一下，我幫#abgne_fade_pic .control a.control_menu {background: url(img/cir_ctrl.png) no-repeat 0 0;}加上背景圖了，但是數字仍是會存在
        我放在網上，可請大大幫我看一下問題出在哪??
        http://www.apex-pac.com/test1/test06.rar
      - 男丁格爾於 2012-07-12 15:26:43 說：
        
        在加個 text-indent: -9999px; 吧
      - vicky1023 於 2012-07-12 16:15:12 說：
        
        #abgne_fade_pic .control a.control_menu {background: url(img/cir_ctrl.png) no-repeat 0 0; text-indent: -9999; }還是不行!!
        
        謝謝男丁老師，太麻煩你了，我想還是放棄好了，改別的方式吧!!
      - 男丁格爾於 2012-07-12 16:17:52 說：
        
        如果可以的話, 就把完整的檔案(html,css,js,images)一起寄給我試~
      - vicky1023 於 2012-07-12 16:54:19 說：
        
        男丁老師，這是完整檔案
        http://www.apex-pac.com/test1/test06.htm
      - 男丁格爾於 2012-07-12 16:57:29 說：
        
        text-indent: -9999px; 單位要加上去, 直接加在 #abgne_fade_pic .control a 中就可以
      - vicky1023 於 2012-07-12 17:16:10 說：
        
        嗚嗚~謝謝男丁老師，終於成功了!!
        你的盡心盡力教導真的很感動!!
nancy 於 2012-07-13 13:06:48 說：

不好意思，我是初學者，想做出淡入淡出輪播圖片，像以下這個連結上方的輪播方式，http://mulife.tw/，這是用flash作成的，如果要改變右下角的小圖改成自己的圖片，這種語法該怎麼寫？拜託您教教我！謝謝

登入後再回覆
- 男丁格爾於 2012-07-23 09:10:55 說：
  
  我看他網站沒什麼 flash 的內容哩@@
  不過以我範例來說, 只要改改 html 中的圖片內容就可以了, 當然相對應的 css 寬高也要一起改喔!
  
  登入後再回覆
Wei 於 2012-08-10 15:19:52 說：

男老師我想請問一下
如果我希望圖片不要有超連結的話
那該怎麼做呢?!

登入後再回覆
- 男丁格爾於 2012-08-13 10:45:38 說：
  
  可以試著把超連結區塊移除只留圖片看看~
  
  登入後再回覆
ALICE 於 2012-08-22 01:01:59 說：

男丁大:

關於上面有人問到圓點圖形，我也照上面改了

可123按鈕是不見了，但是圓點還是出不來

不太懂你說的"指定背景圖片"是要改哪裡

那如果整張廣告要置中的話，要如何用呢??

我有爬過前面文章，嘗試過了可是還是失敗

謝謝!

登入後再回覆
- 男丁格爾於 2012-10-06 21:18:58 說：
  
  指定背景圖片就是用 css 去設定選項的 background-image
  整個廣告要置中的話, 通常就是把該區塊的 margin 設成 0 auto;
  
  登入後再回覆
路人於 2012-09-03 15:49:24 說：

抱歉想問一下兩個問題
第一:
整個結構似乎不是如此簡單吧，似乎要倒入

"jquery-latest.min.js"
這個黨才能夠正常運作。
問題2，可以不顯示右下角那三個方塊嗎，但不知道該怎麼更動，改了似乎沒辦法正常運作。

登入後再回覆
路人於 2012-09-14 01:35:25 說：

你好我之前好像來發問過，但找不到流言在哪..。
我發現，還要倒入:http://code.jquery.com/jquery-latest.min.js這個才能正常運作。

所以程式碼奇很還滿長滿複雜的?
順帶一題，如果我不想要右下的按鈕是否會變得比較簡單一點，該怎麼修改呢，感謝!

登入後再回覆
- 路人於 2012-09-14 01:37:14 說：
  
  然後我留完言之前的連言就跑出來了..真詭異，留了兩次不好意思了。
  
  登入後再回覆
問題求助於 2012-10-27 16:01:40 說：

請問版面中的網站連結可以取消嗎? 如何刪除? 謝謝

登入後再回覆
- 男丁格爾於 2012-11-16 21:51:44 說：
  
  可以把 href 改成 # 就可以了,
  若是要把超連結整個拿掉的話, 那麼程式中有 siblings('a') 的要改成 siblings('img')
  
  登入後再回覆
bonny1279 於 2012-10-30 11:43:57 說：

老師您好:
我是剛加入的會員,現在遇到一個問題是,我把這個淡入淡出效果改成,一張固定底圖+3張產品圖(png檔)在上面輪播,但在ie瀏覽都會有黑邊出現...在firefox & chrome 都是正常的,不知道要如何解決... (我想請老師幫我看原始碼.要怎麼寄給你?) 謝謝!

登入後再回覆
- 男丁格爾於 2012-11-16 21:52:08 說：
  
  這是 IE9 以下的 bug...
  
  登入後再回覆
kkman021 於 2012-12-04 10:49:42 說：

老師您好，我想請問一下有關版權的問題。
此網站的範例是否可以移到任意網站上使用呢？
或者是說有甚麼樣的限制。
謝謝！

登入後再回覆
小青蛙於 2012-12-17 17:11:27 說：

您好
依舊是timer問題當點選後下一張會很快跑掉
我將fadeTo改用animate

animate時間用fadeOutSpeed = 1000,
fadeInSpeed = 1000,
$ad.eq(showIndex).stop().animate({left:0},fadeInSpeed, function(){~~~~

發現當點選後若沒有點頁面上#abgne_fade_pic區塊以外的範圍
下一張會很快就跑掉
這可能要從哪邊去修改呢?

登入後再回覆