男丁格爾's 脫殼玩

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

現在很多公司網頁的動態效果都希望能在像是 iPad 上能正常瀏覽，可惜偏偏 iPad 就是不理不理 Flash，因此上課時最常被問到的就是如何寫出滑動的展示效果。滑動的效果不外是控制區塊的 top 或是 left 來達成，但最重要的還是整個區塊的操作設計。只要設計排版不同，就算用到同樣的原理也能產生不一樣的使用者體驗(UX)。

好了~有興趣的就跟筆者一起來動手試看看囉(圖片來源-梅問題教學網)：

檢視原始碼 HTML

<body>
	<div id="abgne-110223">
		<div class="wrap-110223">
			<ul>
				<li><a href="#"><img src="A-280_02.jpg" alt="從正面可看到，三孔Bowens的標準卡口，並且在卡口處還有個卡榫，如此一來再大的燈罩也不用怕啦" /></a></li>
				<li><a href="#"><img src="A-280_03.jpg" alt="轉到後方的屁屁，正是所有的精華所在，所有的調控都集中在此" /></a></li>
				<li><a href="#"><img src="A-280_04.jpg" alt="下巴的地方，可看到傘孔安裝的地方。" /></a></li>
				<li><a href="#"><img src="A-280_05.jpg" alt="再往下面一點，就會看到多了一個貼心的安全卡鎖，這樣就不用擔心，閃燈與腳架鬆開時，不小心掉下來的命運" /></a></li>
				<li><a href="#"><img src="A-280_06.jpg" alt="在燈的最尾部，會看到一個小小的突出物，難不成長瘤啦！哈～當然不是囉！這是光觸發的感應器" /></a></li>
			</ul>
		</div>
		<div class="caption"></div>
		<div class="arrows">
			<a href="#" class="prev"></a>
			<a href="#" class="next"></a>
		</div>
	</div>
</body>

其中有幾個區塊都是沒有內容的，像是 .caption 是用來放置圖片描述用的等等。雖然這些都能透過 Script 來動態產生，但為了避免增加同學在看程式時的負擔，所以儘量會先寫好。

接著再利用 CSS 來排版：

檢視原始碼 CSS

a img {
	border: none;
	vertical-align: middle;
}
 
#abgne-110223 {
	height: 456px;	/* 圖片的高 + 30 */
	width: 642px;	/* 圖片的寬 + 邊框寬度 * 2 */
	overflow: hidden;
}
 
#abgne-110223 .wrap-110223 {
	height: 426px;	/* 圖片的高 */
	width: 640px;	/* 圖片的寬 */
	overflow: hidden;
	position: relative;
	margin-bottom: 5px;
	border: 1px solid #ccc;
}
 
.wrap-110223 ul, .wrap-110223 li {
	list-style: none;
	margin: 0;
	padding: 0;
}
 
.wrap-110223 ul {
	position: absolute;
}
 
.wrap-110223 ul li {
	float: left;
}
 
#abgne-110223 .arrows {
	float: right;
}
 
#abgne-110223 .arrows a {
	float: left;
	width: 22px;
	height: 22px;
	background: url(arrows.png) no-repeat left top;
}
 
#abgne-110223 a.next {
	margin-left: -1px;
	background-position: right top;
}
 
#abgne-110223 .caption {
	float: left;
	width: 596px;		/* 區塊的寬 - .arrows 的寬(44) */
	overflow: hidden;	/* 避免文字太長 */
	color: #666;
	font-size: 13px;
	line-height: 22px;	/* .arrows a 的高 */
}

經過 CSS 排版後就已經能看出大概的畫面了

當然讓它能動起來的重責大任就落在 jQuery 身上了：

檢視原始碼 JavaScript

$(function(){
	// 先取得 #abgne-110223 及 ul, li 及 .caption 元素
	// 並預設先顯示第幾個, 還有動畫速度
	var $block = $('#abgne-110223'), 
		$wrap = $block.find('.wrap-110223'), 
		$ul = $wrap.find('ul'), 
		$li = $ul.find('li'), 
		$caption = $block.find('.caption'), 
		_default = 0, 
		_width = $wrap.width(), 
		animateSpeed = 400;
 
	// 先把 ul 的寬度設成 li 數量 x $wrap 的寬
	$ul.width(_width * $li.length);
	// 如果 .arrows 中的 a 被點擊時
	$block.find('.arrows').delegate('a', 'click', function(event){
		// 先找出 .selected 的元素後移掉該樣式
		var $selected = $li.filter('.selected').removeClass('selected'), 
			// 找出目前顯示的元素是第幾個
			_index = $li.index($selected);
 
		// 依點擊的是上一張或下一張來切換
		_index = (event.target.className == 'prev' ? _index - 1 + $li.length : _index + 1) % $li.length;
		$ul.animate({
			left: _index * _width * -1
		}, animateSpeed);
		// 改變標題
		$caption.hide().html($li.eq(_index).addClass('selected').find('img').attr('alt')).fadeIn(animateSpeed);
 
		return false;
	});
 
	// 先顯示預設的
	$ul.css('left', _default * _width * -1);
	$caption.html($li.eq(_default).addClass('selected').find('img').attr('alt'));
 
	$block.find('a').focus(function(){
		this.blur();
	});
});

這樣就能快速的做出另一種效果的商品展示囉：

若需要自動輪播時得再補上控制輪播用計時器部份：

檢視原始碼 JavaScript

$(function(){
	// 先取得 #abgne-110223 及 ul, li 及 .caption 元素
	// 並預設先顯示第幾個, 還有動畫速度
	var $block = $('#abgne-110223'), 
		$wrap = $block.find('.wrap-110223'), 
		$ul = $wrap.find('ul'), 
		$li = $ul.find('li'), 
		$caption = $block.find('.caption'), 
		_default = 0, 
		_width = $wrap.width(), 
		animateSpeed = 400, 
		timer, speed = 3000, isHover = false;
 
	// 先把 ul 的寬度設成 li 數量 x $wrap 的寬
	// 並在滑鼠移上時停止計時器; 移出後再啟動計時器
	$ul.width(_width * $li.length).hover(function(){
		isHover = true;
		clearTimeout(timer);
	}, function(){
		isHover = false;
		timer = setTimeout(move, speed);
	});
	// 如果 .arrows 中的 a 被點擊時
	$block.find('.arrows').delegate('a', 'click', function(event){
		// 如果滑鼠現在是移入狀態就不做動作
		if(isHover) return;
		clearTimeout(timer);
 
		// 先找出 .selected 的元素後移掉該樣式
		var $selected = $li.filter('.selected').removeClass('selected'), 
			// 找出目前顯示的元素是第幾個
			_index = $li.index($selected);
 
		// 依點擊的是上一張或下一張來切換
		_index = (event.target.className == 'prev' ? _index - 1 + $li.length : _index + 1) % $li.length;
		$ul.animate({
			left: _index * _width * -1
		}, animateSpeed, function(){
			if(!isHover){
				timer = setTimeout(move, speed);
			}
		});
		// 改變標題
		$caption.hide().html($li.eq(_index).addClass('selected').find('img').attr('alt')).fadeIn(animateSpeed);
 
		return false;
	});
 
	// 先顯示預設的
	$ul.css('left', _default * _width * -1);
	$caption.html($li.eq(_default).addClass('selected').find('img').attr('alt'));
 
	$block.find('a').focus(function(){
		this.blur();
	});
 
	// 控制移動用
	function move() {
		$('.next').click();
	}
 
	// 啟動計時器
	timer = setTimeout(move, speed);
});

範例 1 範例 2

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定

13 筆針對 [jQ]用 jQuery 做畫廊 – 左右切換式的商品展示的迴響

Yuan 於 2011-02-25 15:38:44 說：

改版了，有點小小不習慣
這個能運用到選單上嗎？
假設連結1要連到圖片1這樣?

登入後再回覆
- 男丁格爾於 2011-02-25 17:28:28 說：
  
  我不太懂你的意思耶..可以的話用個圖片說明一下:$
  
  登入後再回覆
LEO800330 於 2011-02-28 19:26:29 說：

請問一下...
那個1.3伊莉查詢器會跳出
An exception of class NilObjectException was not handled. The application must shut down.
的問題有辦法改善嗎@@?

登入後再回覆
- 男丁格爾於 2011-03-02 08:44:08 說：
  
  我再找時間修改一下XD
  
  登入後再回覆
rogerhuang0108 於 2011-04-11 15:11:02 說：

請問老師，可以把這個案例做成像模擬在ipad上換圖的效果嗎？（就是用手指按圖，往左邊刷，就換成下一張;換成在pc上的話，就是滑鼠左鍵壓著往左邊拉就換成下一張圖）
謝謝！

登入後再回覆
- 男丁格爾於 2011-04-14 12:12:32 說：
  
  你是要用在手機或是平版上面嗎..?
  如果是的話, 可以試試 For Mobile 版的 jQuery
  
  登入後再回覆
delete3647 於 2011-05-01 11:17:41 說：

男丁大

當這個左右切換式的商品展示不止一個呢?

該如何寫@@?

也就是若有兩個商品展示的話，這樣要怎麼寫..

我寫不出來="=

登入後再回覆
- 男丁格爾於 2011-05-04 09:06:05 說：
  
  一樣都是要用 each() 的方式, 又或者直接改寫成外掛..
  
  登入後再回覆
shazna626 於 2011-05-06 14:11:54 說：

修改過CSS的圖片大小設定後,最後一張圖會變成空白QQ"

登入後再回覆
- 男丁格爾於 2011-05-06 23:55:15 說：
  
  能提供個問題範例來看看嗎@@?
  
  登入後再回覆
feegg333 於 2011-08-22 16:18:37 說：

感謝您的教學!!

登入後再回覆
光於 2013-02-05 11:16:09 說：

受益良多謝謝指導~^^

登入後再回覆
黃小偉於 2013-05-21 12:52:45 說：

感謝男丁大的教學文章~

登入後再回覆