Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – 超簡單縮圖切換顯示

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

通常在筆者的範例中都是會個 div 當區塊來把要做效果的內容包在一起的，但其實並不是一定要在一起才行，就看各位的排版來決定。今天筆者就用個超簡單的圖片切換範例來示範給各位看看。

HTML 中當然是把區塊拆開來：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12

<body>
	<div class="showbox"><img id="show-image" src="images/2012TaipeiCartShow_01.jpg" /></div>
	<p>
		分隔用....
	</p>
	<div class="abgne-block-20120106">
		<a href="images/2012TaipeiCartShow_01.jpg"><img src="images/2012TaipeiCartShow_01.jpg" title="" /></a>
		<a href="images/2012TaipeiCartShow_02.jpg"><img src="images/2012TaipeiCartShow_02.jpg" title="" /></a>
		<a href="images/2012TaipeiCartShow_03.jpg"><img src="images/2012TaipeiCartShow_03.jpg" title="" /></a>
		<a href="images/2012TaipeiCartShow_07.jpg"><img src="images/2012TaipeiCartShow_07.jpg" title="" /></a>
	</div>
</body>

接著再用超簡單的 CSS 裝飾一下：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.showbox {
	width: 700px;
	height: 460px;
	border: 2px solid #1dd;
	vertical-align: middle;
}
.abgne-block-20120106 {
	margin-top: 10px;
	width: 680px;
	overflow: hidden;
}
.abgne-block-20120106 a {
	margin-right: 10px;
}
.abgne-block-20120106 a img {
	width: 140px;
	height: 92px;
	border: 2px solid #1dd;
	vertical-align: middle;
}

接著就是一點也不複雜的程式：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
	// 用來顯示大圖片用
	var $showImage = $('#show-image');
 
	// 當滑鼠移到 .abgne-block-20120106 中的某一個超連結時
	$('.abgne-block-20120106 a').mouseover(function(){
		// 把 #show-image 的 src 改成被移到的超連結的位置
		$showImage.attr('src', $(this).attr('href'));
	}).click(function(){
		// 如果超連結被點擊時, 取消連結動作
		return false;
	});
});

這邊的效果是當滑鼠移到超連結上面時，就會把 #show-image 的 src 改成被移到的超連結的位置囉。

什麼~想要讓它有淡出淡入的效果！這...因為只有一張大圖片來改變 src 而已，所以淡出淡入只能用障眼法的方式：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(function(){
	// 用來顯示大圖片用
	var $showImage = $('#show-image');
 
	// 當滑鼠移到 .abgne-block-20120106 中的某一個超連結時
	$('.abgne-block-20120106 a').mouseover(function(){
		var $this = $(this), 
			_src = $this.attr('href');
		// 如果現在大圖跟目前要顯示的圖不是同一張時
		if($showImage.attr('src') != _src){
			$showImage.hide().attr('src', _src).stop(false, true).fadeTo(400, 1);
		}
	}).click(function(){
		// 如果超連結被點擊時, 取消連結動作
		return false;
	});
});

動作就是先以迅雷不及掩耳的速度把圖片隱藏起來並改變大圖的 src 位置後，再用淡入的方式來顯示它。雖然不能達到很漂亮的看到兩張圖片淡入淡出，但至少有有一點點效果啦。

不過這範例就讓超連結沒什麼功能性了。因為筆者範例中大圖跟小圖都是同一張，只是利用寬高的變化來產生效果，所以其實也能改成直接抓小圖來顯示大圖，而讓超連結保持它原有的功能：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10

$(function(){
	// 用來顯示大圖片用
	var $showImage = $('#show-image');
 
	// 當滑鼠移到 .abgne-block-20120106 中的某一個超連結時
	$('.abgne-block-20120106 a').mouseover(function(){
		// 把 #show-image 的 src 改成被移到的超連結中的圖片的src
		$showImage.attr('src', $(this).find('img').attr('src'));
	});
});

雖然不一定要在一個區塊也能做出簡單的圖片切換效果，但若沒特別原因的話，還是建議包在同一區塊會比較方便一點。

範例 1 範例 2 範例 3 範例 4

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
加上自動輪播功能 會員限定

13 筆針對 [jQ]用 jQuery 做畫廊 – 超簡單縮圖切換顯示 的迴響

  4. 男丁老師-自動輪播的滑鼠移入應該是要停在該張圖的大圖，但自動輪播卻沒有停止，不知問題出在哪?謝謝!!

  5. 男丁老師,因為需求，所以大張的那張必須被點擊再單獨放大，像是使用ColorBox,Lightbox等效果，但是我若連結大圖，不管怎樣都只是跑第一張大圖，如何能讓它連結跟著大圖跑?

  6. 男丁老師，我修改你的檔案，可以跑Lightbox效果了，但只能從第一張大圖開始show，不能在第二張時直接第二張大圖show，請問我問題在哪裡，檔案下載位置http://www.arkdesign.co.jp/test/sample.rar

發表迴響