Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – 淡入淡出的縮圖式切換影像

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

筆者今天要介紹給各位的是有別於淡入淡出式的切換影像中的純超連結選單的效果，是利用了縮圖的方式來讓瀏覽者能更直覺性關看。

先來看含有小圖的 ul 清單及 HTML 內容：

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

<body>
	<div class="abgne-block-20110806">
		<ul>
			<li><a href="http://abgne.tw"><img src="images/P1010274.jpg" /></a></li>
			<li><a href="#"><img src="images/P1010290.jpg" /></a></li>
			<li><a href="#"><img src="images/P1010294.jpg" /></a></li>
		</ul>
	</div>
</body>

當然免不了還是要用 CSS 來裝飾：

檢視原始碼 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
33
34
35
36
37
38

.abgne-block-20110806 {
	width: 640px;
	height: 380px;
	border: 1px solid #333;
	background: #ccc;
	position: relative;
	overflow: hidden;
}
.abgne-block-20110806 * {
	margin: 0;
	padding: 0;
	border: none;
}
.abgne-block-20110806 ul, .abgne-block-20110806 li {
	list-style: none;
}
.abgne-block-20110806 ul {
	position: absolute;
	right: 10px;
	bottom: 15px;
	z-index: 9999;
}
.abgne-block-20110806 li {
	float: left;
	margin-left: 5px;
}
.abgne-block-20110806 li a {
	display: block;
	width: 50px;
	height: 50px;
	border: 1px solid #fff;
}
.abgne-block-20110806 li a:hover {
	border: 1px solid #f9f;
}
.abgne-block-20110806 li a img {
	border: none;
}

當準備好 HTML 及 CSS 後，就能看到大概的畫面的：

需要注意的地方在於小圖片及大圖片的檔案關聯，假設小圖片檔名 P1010274.jpg 的話，那麼大圖片的檔名要存成 P1010274-normal.jpg 才行。接下來大圖片及切換的動作就都由 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

$(function(){
	// 取得 .abgne-block-20110806 及其子孫元素 li
	var $block = $('.abgne-block-20110806'), 
		$li = $block.find('li');
 
	// 從 li 中取出超連結及大圖片來產生新的內容
	var _html = '';
	$li.each(function(){
		var $this = $(this), 
			$a = $this.find('a'),  
			$thumb = $a.find('img')
 
		_html += '<a href="' + $a.attr('href') + '"><img src="' + $thumb.attr('src').replace(/(\.[^\.]+)$/, '-normal$1') + '" /></a>';
	});
 
	// 把產生的新內容加到 $block 中
	// 並先隱藏除了第一個以外的元素
	var $link = $block.append(_html).children('a').css({
		position: 'absolute', 
		opacity: 0
	}).eq(0).animate({
		opacity: 1, 
		zIndex: 10
	}).end();
 
	// 當 $li 點擊時
	$li.click(function(){
		// 顯示相對索引的 $link 並把其它的設為透明
		$link.eq($(this).index()).stop().animate({
			opacity: 1, 
			zIndex: 10
		}).siblings('a').stop().animate({
			opacity: 0, 
			zIndex: 0
		});
 
		return false;
	});
});

經過 jQuery 的加工後就，噹噹～

是不是效果還不錯呢！當點擊到大圖片時，可是會有超連結的效果的唷。若還想要把超連結的虛線框取消掉的話，再多補上一句：

檢視原始碼 JavaScript
1
2
3

$block.find('a').focus(function(){
	this.blur();
});

不過因為區塊的寬度是有限的，所以清單的數量要特別注意一下，以免縮圖超出整個區塊了。

範例 1

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

30 筆針對 [jQ]用 jQuery 做畫廊 – 淡入淡出的縮圖式切換影像 的迴響

1 2

    • 基本範例只有點擊切換的，而進階範例才有輪播功能。之前你看到的應該是我首頁的效果。

  3. 你好,我嘗試結合計時器使用自動輪播的功能
    且參考用 jQuery 做畫廊 – 超簡單縮圖切換顯示 II 此篇的語法
    但是因為比較不懂程式語法這部分,仍難無法自動輪播
    所以想請大大給我一點提示...謝謝!感恩!

1 2

發表迴響