Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – 左右不間斷的商品展示輪播

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

一般 Flash 廣告或是商品的輪播大多是不間斷的，所以就常會有網友問說 jQuery 的範例是否能做到不間斷的輪播呢？答案其實連想都不用想的也知道是可以的，且要達到同樣效果的方法有好幾種，筆者此次就針對一種較簡單但效能會差一點點的方式來介紹。

首先當然是要準備好 HTML(圖片還是一樣從梅干那邊 A 來的)：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<body>
	<div id="abgne-block-20110406">
		<div class="slides">
			<ul>
				<li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
			</ul>
		</div>
		<a href="#" class="prev">&lt;</a>
		<a href="#" class="next">&gt;</a>
    </div>
</body>

這次的範例會多加一個外框，因此就會看到有多出一層來包裹 ul。接著就來看 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;  
}
 
a img {
	border: none;
}
 
#abgne-block-20110406 {
	margin: 0 auto;
	width: 632px;	/* 框架圖片的寬 */
	height: 438px;	/* 框架圖片的高 */
	position: relative;
	background: url('images/frame.gif') no-repeat;
}
 
#abgne-block-20110406 a.prev, #abgne-block-20110406 a.next {
	position: absolute;
	top: 173px;
	display: block;
	width: 56px;	/* 左右鈕圖片的寬 */
	height: 53px;	/* 左右鈕圖片的高 */
	text-indent: -9999px;
}
 
#abgne-block-20110406 .prev {
	background: url('images/left.png') no-repeat;
}
 
#abgne-block-20110406 .next {
	background: url('images/right.png') no-repeat;
	right: 0;
}
 
#abgne-block-20110406 .slides {
	overflow: hidden;
	position: relative;
	top: 32px;
	left: 30px;
	width: 574px;	/* 框架中間區塊的寬 */
	height: 376px;	/* 框架中間區塊的高 */
}
 
#abgne-block-20110406 .slides ul {
	position: absolute;
	width: 9990px;
	height: 100%;
}
 
#abgne-block-20110406 .slides li {
	width: 574px;	/* 框架中間區塊的寬 */
	height: 100%;
	float: left;
}

在動手寫程式前先來看看畫面吧~


是不是經過巧手裝飾過後就變的很有質感了呢！接著透過 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

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $block 的寬度及設定動畫時間
	var $block = $('#abgne-block-20110406'), 
		$slides = $block.find('.slides'), 
		$ul = $slides.find('ul'), 
		_width = $slides.width(), 
		_left = _width * -1, 
		_animateSpeed = 400;
 
	// 先把最後一個 li 的內容插入到第一個 li 前面
	// 並設定 $ul 的 left 及 width
	$ul.find('li:first').before($ul.find('li:last')).end().css({
		left: _left,
		width: _width * ($ul.find('li').length + 1)
	});
 
	// 當點擊到 a.prev 時
	$block.find('a.prev').click(function(){
		// 移動 $ul
		$ul.stop(false, true).animate({'left' : _left + _width}, _animateSpeed, function () {
			// 把最後一個 li 的內容插入到第一個 li 前面
			$ul.find('li:first').before($ul.find('li:last')).end().css('left', _left);
		});
		return false;
	});
 
	// 當點擊到 a.next 時
	$block.find('a.next').click(function(){
		// 移動 $ul
		$ul.stop(false, true).animate({'left' : _left - _width}, _animateSpeed, function () {
			// 把第一個 li 的內容插入到最後一個 li 後面
			$ul.find('li:last').after($ul.find('li:first')).end().css('left', _left);
		});
		return false;
	});
 
	$block.find('a').focus(function(){
		this.blur();
	});
});

其中比較關鍵的是 .after() 及 .before() 的地方：

檢視原始碼 JavaScript
1

$ul.find('li:last').after($ul.find('li:first')).end().css('left', _left);

它會馬上的把第一個 li 的內容再插入到最後一個 li 的後面，也就產生了不間斷的效果。不過一直插入移除 DOM 是會耗一點效能啦！



最後要讓它能自動切換的話，則得再加上計時器功能：

檢視原始碼 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $block 的寬度及設定動畫時間
	var $block = $('#abgne-block-20110406'), 
		$slides = $block.find('.slides'), 
		$ul = $slides.find('ul'), 
		_width = $slides.width(), 
		_left = _width * -1, 
		_animateSpeed = 400, 
		// 加入計時器, 輪播時間及控制開關
		timer, _showSpeed = 3000, _stop = false;
 
	// 先把最後一個 li 的內容插入到第一個 li 前面
	// 並設定 $ul 的 left 及 width
	$ul.find('li:first').before($ul.find('li:last')).end().css({
		left: _left,
		width: _width * ($ul.find('li').length + 1)
	});
 
	// 當點擊到 a.prev 時
	var $prev = $block.find('a.prev').click(function(){
		// 移動 $ul
		$ul.stop(false, true).animate({'left' : _left + _width}, _animateSpeed, function () {
			// 把最後一個 li 的內容插入到第一個 li 前面
			$ul.find('li:first').before($ul.find('li:last')).end().css('left', _left);
			// 當移動到正確位置後, 依判斷來啟動計時器
			if(!_stop) {
				clearTimeout(timer);
				timer = setTimeout(move, _showSpeed);
			}
		});
		return false;
	});
 
	// 當點擊到 a.next 時
	var $next = $block.find('a.next').click(function(){
		// 移動 $ul
		$ul.stop(false, true).animate({'left' : _left - _width}, _animateSpeed, function () {
			// 把第一個 li 的內容插入到最後一個 li 後面
			$ul.find('li:last').after($ul.find('li:first')).end().css('left', _left);
			// 當移動到正確位置後, 依判斷來啟動計時器
			if(!_stop) {
				clearTimeout(timer);
				timer = setTimeout(move, _showSpeed);
			}
		});
		return false;
	});
 
	// 如果滑鼠移入 $block 時
	$block.hover(function(){
		// 關閉開關及計時器
		_stop = true;
		clearTimeout(timer);
	}, function(){
		// 如果滑鼠移出 $block 時
		// 開啟開關及計時器
		_stop = false;
		timer = setTimeout(move, _showSpeed);
	}).find('a').focus(function(){
		this.blur();
	});
 
	// 計時器使用
	function move(){
		$next.click();
	};
 
	timer = setTimeout(move, _showSpeed);
});
範例 1 範例 2

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

46 筆針對 [jQ]用 jQuery 做畫廊 – 左右不間斷的商品展示輪播 的迴響

1 2 3

  1. 請問當我改了框的大小後,我的圖片顯示時會被切掉,無法等比例縮放的問題!
    那我應該要改哪裡呢?
    謝謝~

  5. 老師我將範例改成自己想要的樣子之後
    他的所有功能都正常也可以按左右
    但是箭頭會看不見
    請問是哪邊設定有可能出問題呢？

  8. 老師你好 我發現問題了
    我是不小心動到了一些按鈕的參數已經修正完畢

    不過我發現有個問題
    點了左右後他會連續跳兩張 （老師的範例也是）
    不知道老師有沒有發現

    • 試試看在

      檢視原始碼 JavaScript
      1

      // 當點擊到 a.prev 時

      上面加入

      檢視原始碼 JavaScript
      1
2
3
4
5
6
7
8
9
10
11
12

      $ul.find('li').each(function(){
	var $this = $(this), 
		_height = $this.height(), 
		$img = $this.find('img'), 
		_imgHeight = $img.height();
 
	if(_imgHeight < _height){
		$img.css({
			marginTop: (_height - _imgHeight) / 2
		});
	}
});
1 2 3

發表迴響