Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – 含控制器的淡入淡出式圖片切換展示

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

通常圖片的展示是否自動播放都是一開始就決定好的，若是能把這權限交給瀏覽者的話，那麼也能讓瀏覽者有實際參與網站的感覺。此次筆者要教的是跟「淡入淡出式的切換影像」很類似但不同的範例。

HTML 的部份是利用 ul li 來當做列表使用：

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

<body>
	<div class="slideshow">
		<ul>
			<li>
				<a href="#">
					<img src="images/P1030038.jpg" title="" alt="" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/P1030054.jpg" title="" alt="" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/P1030068.jpg" title="" alt="" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/P1030075.jpg" title="" alt="" />
				</a>
			</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
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

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.slideshow {
	position: relative;
	height: 160px;
	width: 210px;
	float: left;
	margin: 0 10px;
	border: 3px solid #ddd;
}
.slideshow li {
	position: absolute;
}
.slideshow a img{
	display: block;
	padding: 0;
	margin: 0 auto;
	border: none;
}
.slideshow li a{
	display: block;
}
.slideshowController {
	position: absolute;
	right: 0;
	bottom: 0;
}
.slideshowController a {
	background: transparent url(images/arrows.png) no-repeat left top;
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	right: 60px;
	bottom: 0;
	z-index: 9999;
	outline: none;	/* 去除超連結虛線 */
}
.slideshowController .next{
	background-position: -30px 0;
	right: 0;
}
.slideshowController .play{
	background-position: -60px 0;
	right: 30px;
}
.slideshowController .pause{
	background-position: -90px 0;
}

雖然有多張圖片，但因為 li 的 position 是設成 absolute，所以只會看到最後一個 li 的內容：

接著再利用 jQuery 來幫每一個 .slideshow 區塊加上專屬的控制器及功能：

檢視原始碼 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
71
72
73
74

$(function(){
	// 預設圖片淡出淡入的動畫時間
	var _fadeSpeed = 600;
 
	// 把每一個 .slideshow 取出來做處理
	$('.slideshow').each(function(){
		// 先取得相關的 ul , li
		// 並產生控制器
		var $this = $(this), 
			$ul = $this.find('ul'), 
			$li = $ul.find('li'), 
			$controller = $('<div class="slideshowController"><a href="#"></a><a href="#" class="play"></a><a href="#" class="next"></a></div>').css('opacity', 0), 
			_len = $li.length, 
			_index = 0, timer, _speed = 2000;
 
		// 先把第一張圖片之外的都透明度設成 0
		$li.eq(_index).css('z-index', 2).siblings().css('opacity', 0);
 
		// 加入控制器並當滑鼠移入時顯示; 滑鼠移出時隱藏
		$this.append($controller).hover(function(){
			$controller.stop().animate({
				opacity: 1
			});
		}, function(){
			$controller.stop().animate({
				opacity: 0
			});
		});
 
		// 當點擊到控制器上面的按鈕時
		$controller.delegate('a', 'click', function(){
			// 先取得按鈕的 class
			var $a = $(this), 
				_className = $a.attr('class');
 
			// 如果按的是 play 或是 pause 鈕
			if(('play pause').indexOf(_className) > -1){
				// 切換目前按鈕圖案
				// 並依狀態來啟動或停止計時器
				$a.toggleClass('pause').hasClass('pause') ? timer = setTimeout(autoClickNext, _fadeSpeed + _speed) : clearTimeout(timer);
				return false;
			}
 
			// 停止計時器
			clearTimeout(timer);
			// 移除 pause 鈕
			$a.siblings('.pause').removeClass('pause');
			// 依按鈕功能來決定上下張圖片索引
			_index = ('next' == _className ? _index + 1 : _index - 1 + _len) % _len;
			// 切換圖片
			show();
 
			return false;
		});
 
		// 自動播放下一張
		function autoClickNext() {
			_index = (_index + 1) % _len;
			show();
			timer = setTimeout(autoClickNext, _fadeSpeed + _speed);
		}
 
		// 淡入淡出圖片
		function show() {
			$li.eq(_index).animate({
				opacity: 1, 
				zIndex: 2
			}, _fadeSpeed).siblings(':visible').animate({
				opacity: 0, 
				zIndex: 1
			}, _fadeSpeed);
		}
	});
});

咱們的控制器可以上一張下一張的切換，還能控制是否自動播放及停止播放的功能，來看預覽效果吧：

那...那如果要讓它預設能自動播放的話呢？首先可以在 .slideshow 中新增一個設定用的 .autoPlay 樣式：

檢視原始碼 HTML
1

<div class="slideshow autoPlay">

接著程式中就能針對有沒有 .autoPlay 樣式來決定是否預設就是自動播放：

檢視原始碼 JavaScript
1
2
3
4

// 如果有設定預設自動播放的話
if($this.hasClass('autoPlay')){
	$controller.find('.play').click();
}

若如果要像韓國的 GMarket 在展示商品時都是像 gif 動畫一樣的瘋狂切換圖片時，只需要把 _fadeSpeed 及 _speed 設短一點就可以囉(只是淡入淡出的功能就沒什麼太大的作用)：

檢視原始碼 JavaScript
1
2

_fadeSpeed = 50
_speed = 100

效果就是會一直換換換~

範例 1 範例 2 範例 3

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

25 筆針對 [jQ]用 jQuery 做畫廊 – 含控制器的淡入淡出式圖片切換展示 的迴響

1 2

  4. 您好:
    工具實在太實用了,不過操作上我還是有些問題
    1.控制器沒有出現會是什麼原因??
    2.前面的abc君詢問過控制器一開始就出現的作法,但是我還是做不太出來說
    3.如果希望照片可以隨機不停播放而非從第一張開始可以嗎???

  5. 老師您好：

    我試用這個範例
    到我個人網站上
    先讓他跑幾張圖
    再page load一次
    會快轉回去第一張....

    不知道老師有沒有碰到這種情況過..

    • 你是一直在該頁面還是有讓它失去焦點(就是用其它視窗蓋在你瀏覽器上面)
      另外你是試那一個範例呢?!

  6. 老師您好：
    謝謝您的教學，說明得非常仔細
    這邊想請問您
    假設圖片的寬是固定的，而有幾張圖片的高不相同
    相框可以隨著圖片改變高度嗎？

    謝謝您

    • 是可以啊, 但這樣高度的變來變去, 會不會產生其它不好的體驗呢?

      要變高度的話, 主要在 show() 這函式中去取出要顯示的圖片高度來同時改變。

  7. 你好，想請教這一個效果。
    當我把每張圖片設定超連結時，為什麼總是跑到最後一張的超連結呢？

  8. 老師~請問一下

    如果圖片的尺寸有大有小

    一開始的時候會全部都出現重疊在一起

    自動播放第二張的時候就會正常

    我是用IE8瀏覽器

    有方法解決一開始重疊的問題嗎?

    我用Chrome看就OK

  9. 老師你好～
    請問一下，我試用這個範例套在Chrome上面沒有問題
    但套用到ie8上，淡出淡入的效果就會lag
    在麻煩老師幫忙看看囉～謝謝

  10. 老師你好
    我試用此範例在Chrome上播放是正常
    但在Ie8播放就會有lag的情形
    再麻煩老師幫忙看一下 問題出在哪？
    謝謝

1 2

發表迴響