Home » jQuery 應用

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

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

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

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

檢視原始碼 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 來設計一下：

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

因為把 li 的 position 設成 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.prev 及 a.next 都是用來控制的鈕，為了讓它能看起來像樣一點，所以得額外再替它們倆增加 CSS：

檢視原始碼 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 中使用超連結來把圖片包起來囉：

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

  4. 您好
    請問要如何可以在同個網站用兩個以上的畫廊?
    我今天測試,發現只能控制一個畫廊且其他畫廊沒反應

    感謝您的好東西!!

    • 程式的部份要改用 .each() 的方式來寫才行。
      或者土法煉鋼的方式就是程式 copy 兩段..不過變數那些都要改或者都各自包在自己的 scope 中

  8. 男丁大大，我嚐試要把此功能跟 滑出式說明結合 可是卻一直失敗

    會出現只有箭頭功能 按下時才跑 滑出說明 請問這種情況要如何修改呢?

    • 我猜想是你的 html 及 css 排版的問題, 這也是要看到檔案才知道要怎樣修改。但兩者是一定可以結合的!

  9. 老師您好:
    我嘗試用了上面說的加上"左右不間斷的商品展示輪播"裡的自動播放，
    可是會被跳出來的隱藏箭頭阻擋播放，改了幾個可能的地方還是一樣，
    不知道老師有沒有什麼方法呢?麻煩您了謝謝!!

    PS.老師的網站真的很詳細很實用!學到很多!很感謝阿~~

1 2 3

發表迴響