Home » jQuery 應用

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

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

筆者在超簡單縮圖切換顯示分享過利用簡單的方式就能實現圖片切換的效果。而今天也是要用同樣的方式，但再加上一些額外的 CSS 排版及小小程式來變成另一種效果。

HTML 一樣是很基本的 ul li：

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

<body>
	<div id="abgne-block-20120110">
		<ul class="link">
			<li><a href="http://abgne.tw"><img src="images/2012TaipeiCartShow_01.jpg" title="" /></a></li>
			<li><a href="http://www.minwt.com"><img src="images/2012TaipeiCartShow_02.jpg" title="" /></a></li>
			<li><a href="http://tw.yahoo.com"><img src="images/2012TaipeiCartShow_03.jpg" title="" /></a></li>
			<li><a href="http://www.google.com"><img src="images/2012TaipeiCartShow_07.jpg" title="" /></a></li>
			<li><a href="http://plus.google.com/"><img src="images/2012TaipeiCartShow_08.jpg" title="" /></a></li>
		</ul>
		<div class="showbox"><a href="http://abgne.tw"><img src="images/2012TaipeiCartShow_01.jpg" /></a></div>
	</div>
</body>

接著就是裝飾畫面不可少的 CSS：

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

#abgne-block-20120110 {
	width: 900px;	/* .showbox 的寬 + .link li a img 的寬 + .link li a img 的邊框寬度 * 2 + .triangle 的 border-left 寬度 + 自訂的間距 */
	height: 468px;	/* (.link li img 的高 + .link li img 的 border-width * 2 + .link li img 的 margin-bottom) * .link li 的數量 -  .link li img 的 margin-bottom */
	position: relative;
	overflow: hidden;
}
#abgne-block-20120110 ul, #abgne-block-20120110 ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#abgne-block-20120110 a {
	outline: none;
}
#abgne-block-20120110 img {
	height: 100%;
	width: 100%;
	border: none;
	vertical-align: middle;
}
#abgne-block-20120110 .link li a {
	position: relative;
	display: block;
	width: 184px;
}
#abgne-block-20120110 .link li a img {
	width: 170px;
	height: 88px;	/* ($adblock 的高 + margin-bottom) / .link li 的數量 - .link li img 的 border-width * 2 + .link li img 的 margin-bottom */
	margin-bottom: 2px;
	border: 2px solid #f00;
}
#abgne-block-20120110 .link {
	position: absolute;
	left: 0;
}
#abgne-block-20120110 .showbox {
	position: absolute;
	right: 0;
	height: 460px;	/* 圖片高度 */
	width: 700px;	/* 圖片寬度 */
	border: 4px solid #f00;
}
#abgne-block-20120110 .link li.on a img {
	border: 2px solid #f00;
}
#abgne-block-20120110 .link li.on .triangle {
	width: 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-top: 10px solid transparent;	/* ie6 不支援 transparent, 可以把它改成跟背景一樣的顏色 */
	border-bottom: 10px solid transparent;	/* ie6 不支援 transparent, 可以把它改成跟背景一樣的顏色 */
	border-left: 10px solid #f00;	/* 三角形箭頭的大小及顏色 */
	position: absolute;
	top: 37px;	/* (.link li a img 的高 + .link li img 的 border-width * 2 + .link li img 的 margin-bottom -  border-top 的寬 - border-bottom 的寬) / 2 */
}

其中比較需要注意的是筆者利用 CSS 來產生了三角形的圖示：

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

/* 向右箭頭 */
.right-triangle {
	width: 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #f00;
}

如果是要一個向右的箭頭時，就得要上下邊有邊框且顏色透明，然後左邊框加上顏色才行；如果是要向上箭頭的呢~就是要左右邊有邊框且顏色透明，然後下邊框加上顏色囉：

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

/* 向上箭頭 */
.top-triangle {
	width: 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #f00;
}

當排版完後也就能看到9成的畫面了

接著當滑鼠移到縮圖時就切換大圖片的功能，這當然就是要請出 jQuery 囉：

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

$(function(){
	// 先取得相關的區塊及預設要先顯示那一個
	var $block = $('#abgne-block-20120110'), 
		$link = $block.find('.link li'), 
		$showBox = $block.find('.showbox'), 
		_default = 0;
 
	// 幫 $link a 加入一個 span.triangle, 用來產生三角形用
	$link.find('a').append('<span class="triangle"></span>');
 
	// 當滑鼠移到 $link 上時
	$link.mouseover(function(){
		var $this = $(this);
 
		// 修改 $showBox 中的超連結及圖片
		$showBox.html('<a href="'+$this.find('a').attr('href')+'"><img src="'+$this.find('img').attr('src')+'" /></a>');
		// 幫被滑鼠移上去的 li 加上 .on
		$this.addClass('on').siblings('.on').removeClass('on');
	}).click(function(){
		// 如果是點擊到 $link 時則取消連結功能
		return false;
	}).eq(_default).mouseover();
});

所以當滑鼠移到不同的縮圖時，大圖除了馬上就會切換之外，縮圖旁也會有個小箭頭出現

如果需要自動輪播時，一樣是加上計時器就可以了：

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

var timer, speed = 1000
$block.hover(function(){
	// 當滑鼠移入時, 停止計時器
	clearTimeout(timer);
}, function(){
	// 當滑鼠移出時, 啟動計時器
	timer = setTimeout(auto, speed);
});
 
// 用來自動輪播使用
function auto(){
	var _index = $link.filter('.on').index();
	_index = (_index + 1) % $link.length;
 
	$link.eq(_index).mouseover();
	timer = setTimeout(auto, speed);
}
 
// 啟動計時器
timer = setTimeout(auto, speed);
範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
縮圖在右邊並自動輪播 會員限定

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

  1. 老師!!請問一下!!我想嘗試將小圖放到大圖的右手邊，調整CSS樣式
    #abgne-block-20120110 .link {
    position: absolute;
    /*left: 0;*/
    margin-left:200px;
    }
    可是，margin-left:200px;超過200px就沒有辦法動做了!!請問應該哪邊要做修改呢??

  2. 男丁老師 您好:
    請問我想把這個語法放入彈出視窗
    可是放進去
    就會連要點選的圖片都不見了 ><
    請問老師.哪裡設定錯誤了嗎?

發表迴響