Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – 圖片展示之左右隱藏箭頭

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

如果你是看到預覽圖(感謝梅干熱情提供)而覺得裡面會有好康的話,建議可以按下 Alt + ← 來回到上一頁:如果你現在因為標題看不懂而感到莫名其妙的話,請不要覺得是自己的問題,因為筆者已經想不出範例名稱了XD!所以請忽略標題直接看下去。

首先準備個簡單的 HTML 內容:

1
2
3
4
5
6
7
8
9
10
11
<body>
	<div class="abgne_product_arrow_silder">
		<ul>
			<li class="selected"><img src="m01.jpg" /></li>
			<li><img src="m02.jpg" /></li>
			<li><img src="m03.jpg" /></li>
			<li><img src="m04.jpg" /></li>
			<li><img src="m05.jpg" /></li>
		</ul>
	</div>
</body>

接著用 CSS 來設計一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.abgne_product_arrow_silder {
	width: 450px;
	height: 250px;
	position: relative;
	border: 1px solid #ccc;
	overflow: hidden;
}
.abgne_product_arrow_silder ul, .abgne_product_arrow_silder ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.abgne_product_arrow_silder ul li {
	position: absolute;
	z-index: 1;
}
.abgne_product_arrow_silder ul li.selected {
	z-index: 99;
}

因為把 liposition 設成 absolute 後,所以全部的 li 都會疊在一起,且有 .selected 的 li 階層會最高。不過因為 li 都疊在一起,所以我們得提供功能鈕來切換其它圖片才行,所以筆者會利用 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
40
41
42
43
44
45
$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 並設定箭頭圖片的寬度及其透明度
	// 接著產生兩個放置箭頭用的空白超連結
	var $silder = $('.abgne_product_arrow_silder'), 
		$li = $('ul li', $silder),
		arrowWidth = 48 * -1, 
		arrowOpacity = .3, 
		$arrows = $('<a href="#" class="prev"></a><a href="#" class="next"></a>').css('opacity', arrowOpacity),
		$prev = $arrows.filter('.prev'), 
		$next = $arrows.filter('.next'), 
		fadeSpeed = 400;
 
	// 把箭頭超連結加到 $silder 中
	// 並幫 $silder 加上 hover 事件
	$silder.append($arrows).hover(function(){
		var no = $li.filter('.selected').index();
		arrowAction(no > 0 ? 0 : arrowWidth, no < $li.length - 1 ? 0 : arrowWidth);
	}, function(){
		arrowAction(arrowWidth, arrowWidth);
	});
 
	// 當滑鼠點擊左右箭頭時
	$arrows.click(function(){
		// 先取出目前顯示的 li 及其排行
		var $selected = $li.filter('.selected'),
			no = $selected.index();
 
		// 判斷是要上一張還是下一張
		no = this.className=='prev' ? no - 1 : no + 1;
		$li.eq(no).addClass('selected').siblings().removeClass('selected');
 
		arrowAction(no > 0 ? 0 : arrowWidth, no < $li.length - 1 ? 0 : arrowWidth);
 
		return false;
	}).focus(function(){
		this.blur();
	});
 
	// 控制左右箭頭顯示或隱藏
	function arrowAction(l, r){
		$prev.stop().css({ left: l });
		$next.stop().css({ right: r });
	}
});

其中的 a.preva.next 都是用來控制的鈕,為了讓它能看起來像樣一點,所以得額外再替它們倆增加 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.prev {
	background:url(prev.gif) no-repeat;
	width: 38px;
	height: 48px;
	position: absolute;
	left: -48px;	/* 先藏在左邊 */
	top: 101px;	/* (區塊高-圖片高) / 2 */
	z-index: 100;
}
.next {
	background:url(next.gif) no-repeat;
	width: 38px;
	height: 48px;
	position: absolute;
	right: -48px;	/* 先藏在右邊 */
	top: 101px;	/* (區塊高-圖片高) / 2 */
	z-index:100;
}

當瀏覽者把滑鼠移到 .abgne_product_arrow_silder 區塊上時,程式會很 smart 的出現上下鈕;同時當點選上下鈕時會切換該顯示的 li 內容。



我想一定有人會覺得這樣切換圖片很單調,所以筆者幫上下鈕的動畫的出場方式,而圖片的切換就用淡入淡出(Fade)的方式:

檢視原始碼 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
$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 並設定箭頭圖片的寬度及其透明度
	// 接著產生兩個放置箭頭用的空白超連結
	var $silder = $('.abgne_product_arrow_silder'), 
		$li = $('ul li', $silder).not(':first').css('opacity', 0).end(),
		arrowWidth = 48 * -1, 
		arrowOpacity = .3, 
		$arrows = $('<a href="#" class="prev"></a><a href="#" class="next"></a>').css('opacity', arrowOpacity),
		$prev = $arrows.filter('.prev'), 
		$next = $arrows.filter('.next'), 
		fadeSpeed = 400;
 
	// 把箭頭超連結加到 $silder 中
	// 並幫 $silder 加上 hover 事件
	$silder.append($arrows).hover(function(){
		var no = $li.filter('.selected').index();
		arrowAction(no > 0 ? 0 : arrowWidth, no < $li.length - 1 ? 0 : arrowWidth);
	}, function(){
		arrowAction(arrowWidth, arrowWidth);
	});
 
	// 當滑鼠點擊左右箭頭時
	$arrows.click(function(){
		// 先取出目前顯示的 li 及其排行
		var $selected = $li.filter('.selected'),
			no = $selected.index();
 
		// 判斷是要上一張還是下一張
		no = this.className=='prev' ? no - 1 : no + 1;
		$li.eq(no).stop().fadeTo(fadeSpeed + 100, 1, function(){
			arrowAction(no > 0 ? 0 : arrowWidth, no < $li.length - 1 ? 0 : arrowWidth);
		}).addClass('selected').siblings().fadeTo(fadeSpeed, 0).removeClass('selected');
 
		return false;
	}).focus(function(){
		this.blur();
	});
 
	// 控制左右箭頭顯示或隱藏
	function arrowAction(l, r){
		$prev.stop().animate({ left: l });
		$next.stop().animate({ right: r });
	}
});

若還需要讓圖片能有超連結功能的話,那就是在 li 中使用超連結來把圖片包起來囉:

1
2
3
4
5
6
7
8
9
10
11
<body>
	<div class="abgne_product_arrow_silder">
		<ul>
			<li class="selected"><a href="http://abgne.tw"><img src="images/a.jpg" /></a></li>
			<li><a href="http://www.google.com"><img src="images/b.jpg" /></a></li>
			<li><a href="#"><img src="images/g.jpg" /></a></li>
			<li><a href="#"><img src="images/n.jpg" /></a></li>
			<li><a href="#"><img src="images/e.jpg" /></a></li>
		</ul>
	</div>
</body>
範例 1 範例 2 範例 3

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

38 筆針對 [jQ]用 jQuery 做畫廊 – 圖片展示之左右隱藏箭頭 的迴響

  1. 您好
    想請問我將畫廊放置頁籤tab其中一個
    但網頁開啟時會看到此畫廊
    點各頁籤才會被隱藏
    這是哪裡設定有問題呢?

  2. 您好~
    不好意思又來發問~^^~
    想請問如果希望
    網頁瀏覽時圖片上就有箭頭可以點選
    而不是滑鼠滑到圖片上才出現箭頭
    請問要修改哪邊?

發表迴響