男丁格爾's 脫殼玩

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

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

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

檢視原始碼 HTML

<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

.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

$(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

.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

$(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

<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

尼奧於 2012-04-05 10:50:12 說：

大大的有點bug, 下一頁的按鈕可以有盡, 但上一頁按太快, 就會停不了。 (p.s. 例1因為沒有fade的效果, 問題看不出來。)

登入後再回覆
feiya 於 2012-05-04 18:19:05 說：

不好意思想請問這一層「abgne_product_arrow_silder」的高度可以不固定嗎？
寫了auto圖片就出不來了...

因為不想把箭頭壓在圖片上，移出圖片外後又想試試混合直式橫式的圖片，
不過「abgne_product_arrow_silder」這個沒定義好高度好像就不能執行，是嗎？

登入後再回覆
Wu Kobe 於 2014-04-28 00:29:26 說：

想請問一下大大要怎麼讓最後一張可以回到第一張而不是消失

登入後再回覆
- 男丁格爾於 2014-05-01 23:06:47 說：
  先把程式中有 arrowAction(...) 的語法都先移除, 接著再把 $slide.append($arrows)... 整段換成
  
  檢視原始碼 JavaScript
  1 2
  $silder.append($arrows); arrowAction(0, 0);
  再將判斷是要上一張還是下一張的語法改成
  
  檢視原始碼 JavaScript
  1
  no = (this.className=='prev' ? (no + $li.length - 1) : no + 1) % $li.length;
  這樣應該就 ok 了吧...吧!!
  登入後再回覆
  - Wu Kobe 於 2014-05-03 22:06:48 說：
    
    感謝大大 OK了!!!
    
    接下來我在研究看看怎麼讓他自動輪播好了 🙂
    
    登入後再回覆
    - 男丁格爾於 2014-05-19 14:03:26 說：
      
      有問題歡迎隨時提出來討論..
      
      登入後再回覆
S150275 於 2015-02-25 17:20:05 說：

大大我發現有點BUG，我是用範例２套用在我的程式中，
但發現我按下一個箭頭要按兩次才會跳下一張耶，是我哪裡寫錯了嗎？
只有一開始第一張圖讀入才會，點完兩次下一張後，只要不重新整理，
都會正常！
大大可以幫忙查看看是哪裡出了問題嗎??

登入後再回覆