Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – 仿 2012 倫敦奧運官網首頁輪播效果

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

最近熱門的話題我想非屬奧運莫屬了，筆者也趁這星期的颱風天逛了一下奧運官網，然後被首頁的最新精彩賽況圖片輪播的效果所吸引

如果您也跟筆者一樣看了就手癢的話，快快打開編輯器動手做囉：

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

<body>
	<div id="abgne-block-20120804">
		<div class="photo">
			<a href="#">
				<img src="images/dsc_0342.jpg" alt="第一張圖片">
				<div class="desc-block">
					<div class="desc-bg"></div>
					<div class="desc-title">每一個都讓人流口水的義式麵包</div>
				</div>
			</a>
		</div>
		<div class="thumbs">
			<div class="carousel">
				<ul>
					<li><a href="#"><img src="images/dsc_0342.jpg" alt="每一個都讓人流口水的義式麵包" title="每一個都讓人流口水的義式麵包"></a></li>
					<li><a href="#"><img src="images/dsc_0385.jpg" alt="用來垃圾分類的綠寶、白寶、黃寶及藍寶" title="用來垃圾分類的綠寶、白寶、黃寶及藍寶"></a></li>
					<li><a href="#"><img src="images/dsc_0424.jpg" alt="龐貝城中用來表演用的露天劇場" title="龐貝城中用來表演用的露天劇場"></a></li>
					<li><a href="#"><img src="images/dsc_0535.jpg" alt="龐貝城中用來祭祀用的神壇" title="龐貝城中用來祭祀用的神壇"></a></li>
					<li><a href="#"><img src="images/dsc_0595.jpg" alt="Hotel Pazziella 的外觀" title="Hotel Pazziella 的外觀"></a></li>
					<li><a href="#"><img src="images/dsc_0575.jpg" alt="我來到一個島叫做卡不里島" title="我來到一個島叫做卡不里島"></a></li>
					<li><a href="#"><img src="images/dsc_0952.jpg" alt="在蘇連多的俏皮神像" title="在蘇連多的俏皮神像"></a></li>
					<li><a href="#"><img src="images/dsc_1882.jpg" alt="在艾曼紐二世迴廊中的可憐公牛" title="在艾曼紐二世迴廊中的可憐公牛"></a></li>
				</ul>
			</div>
		</div>
	</div>
</body>

這邊一樣是把顯示圖片的區塊跟縮圖區塊拆成兩邊，而 .desc-title 中的描述內容會從縮圖中的 alt 屬性取得。接著來套上 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

#abgne-block-20120804 {
	width: 552px;	/* 圖片寬度 + 縮圖寬度 + 間隔 8px */
	height: 300px;	/* 圖片高度 */
	padding: 6px 10px;
	position: relative;
	border: 1px solid #ccc;
}
#abgne-block-20120804 ul, #abgne-block-20120804 li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#abgne-block-20120804 img {
	border: none;
}
#abgne-block-20120804 .photo {
	width: 450px;	/* 圖片寬度 */
	height: 300px;	/* 圖片高度 */
	position: absolute;
}
#abgne-block-20120804 .desc-block {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 450px;	/* 圖片寬度 */
	height: 32px;
}
#abgne-block-20120804 .desc-bg, #abgne-block-20120804 .desc-title {
	position: absolute;
	width: 430px;	/* 圖片寬度 - padding * 2 */
	background: #000;
	top: 0;
	height: 24px;
	padding: 4px 10px;
}
#abgne-block-20120804 .desc-title {
	color: #fff;
	background: none;
	line-height: 24px;
}
#abgne-block-20120804 #playPause-btn {	/* 播放/暫停鈕 */
	position: absolute;
	display: block;
	right: 5px;
	bottom: 5px;
	width: 21px;
	height: 21px;
	width: 21px;
	height: 21px;
	text-indent: -999px;
}
#abgne-block-20120804 .playPause-btn-play {
	background: url(images/sprite.png) no-repeat -21px 0px;
}
#abgne-block-20120804 .playPause-btn-pause {
	background: url(images/sprite.png) no-repeat 0px 0px;
}
#abgne-block-20120804 .thumbs {
	width: 94px;
	height: 288px;	/* 圖片高度 - padding-top */
	padding-top: 12px;
	right: 10px;
	position: absolute;
}
#abgne-block-20120804 .carousel {
	height: 280px;
	position: relative;
	overflow: hidden;
}
#abgne-block-20120804 .carousel .nav-bar {	/* 當被點選時，縮圖左邊的顏色 */
	float: left;
	width: 2px;
	height: 63px;
	margin-right: 2px;
}
#abgne-block-20120804 .carousel img {
	float: left;
	width: 90px;
	height: 63px;
}
#abgne-block-20120804 .carousel ul {
	position: absolute;
}
#abgne-block-20120804 .carousel li {
	width: 94px;
	height: 72px;
}
#abgne-block-20120804 .carousel .current .nav-bar {
	background: #007acc;
}
#abgne-block-20120804 .thumbs .prev, #abgne-block-20120804 .thumbs .next {	/* 縮圖上下的控制鈕 */
	position: absolute;
	left: 43px;
	width: 12px;
	height: 0px;
	padding-top: 6px;
	overflow: hidden;
	display: block;
	cursor: pointer;
	background: url(images/sprite.png) no-repeat 0 0;
}
#abgne-block-20120804 .thumbs .prev {
	top: 0px;
	background-position: 0 -21px;
}
#abgne-block-20120804 .thumbs .next {
	bottom: -2px;
	background-position: 0 -27px;
}

厚~加上去後是不是就已經很像了呢~

好了，在看接下來的程式之前，先深呼吸一下吧~：

檢視原始碼 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

$(function(){
	// 先一一取得相關的元素及高度
	var $block = $('#abgne-block-20120804'), 
		$photo = $block.find('.photo'), 
		$photoA = $photo.find('a'), 
		$photoImg = $photoA.find('img'), 
		$photoDesc = $photoA.find('.desc-title'), 
		$thumbs = $block.find('.thumbs'), 
		$carousel = $block.find('.carousel'), 
		_carouselHeight = $carousel.height(), 
		$playPauseBtn = $photo.append('<a href="#playPause" class="playPause-btn-pause" id="playPause-btn" title="暫停">暫停</a>').find('#playPause-btn'), 
		$ul = $thumbs.find('ul'), 
		$li = $ul.find('li'), 
		_liHeight = $li.height(), 
		_set = Math.ceil(_carouselHeight / _liHeight), 
		_count = Math.ceil($li.length / _set), 
		_height = _set * _liHeight * -1, 
		timer, speed = 3000, _animateSpeed = 400, // 分別設定輪播速度及動畫速度
		_index = 0, _countIndex = 0;
 
	// 先在縮圖前面都插入一個 .nav-bar, 主要是當點選到該縮圖時的效果
	$('<span class="nav-bar"></span>').insertBefore($li.find('img'));
	// 先讓描述區塊的背景有透明度
	$block.find('.desc-bg').css('opacity', 0.7);
 
	// 如果圖片組數超出一次能顯示的數量時, 產生可以切換的上下鈕
	var $controls = null;
	if(_count>1){
		$controls = $thumbs.append('<a href="#prev" class="prev"></a><a href="#next" class="next"></a>').find('.prev, .next'); 
		var $prev = $controls.eq(0).hide(), 
			$next = $controls.eq(1);
 
		// 當點擊上下鈕時
		$controls.click(function(e){
			// 計算要顯示第幾組
			_countIndex = Math.floor((e.target.className == 'prev' ? _countIndex - 1 + _count : _countIndex + 1) % _count);
 
			// 進行動畫
			$ul.stop().animate({
				top: _countIndex * _height
			}, _animateSpeed);
 
			// 判斷上下鈕顯示與否
			$prev.toggle(_countIndex>0);
			$next.toggle(_countIndex!=_count-1);
 
			return false;
		});
	}
 
	// 如果縮圖 li 被點擊時
	$li.click(function(){
		var $this = $(this), 
			$a = $this.find('a'), 
			$img = $this.find('img');
 
		clearTimeout(timer);
		_index = $this.index();
		// 分別改變左邊顯示區塊的超連結, 圖片, alt 及描述內容
		$photoA.attr('href', $a.attr('href'));
		$photoImg.attr({
			src: $img.attr('src'), 
			alt: $img.attr('alt')
		});
		$photoDesc.html($img.attr('alt'));
		$this.addClass('current').siblings('.current').removeClass('current');
 
		// 如果目前的播放鈕並不是在播放樣式時, 就啟動計時器
		if(!$playPauseBtn.hasClass('playPause-btn-play')) timer = setTimeout(auto, speed + _animateSpeed);
 
		return false;
	}).eq(_index).click();
 
	// 當播放鈕被點擊時
	$playPauseBtn.click(function(){
		// 進行 .playPause-btn-pause 及 .playPause-btn-play 樣式切換
		var $this = $(this).toggleClass('playPause-btn-pause playPause-btn-play'), 
			_hasPlay = $this.hasClass('playPause-btn-play'), 
			_txt = _hasPlay ? '播放' : '暫停';
 
		// 如果目前的播放鈕並不是在播放樣式時, 就啟動計時器; 反之則停止計時器
		if(_hasPlay) clearTimeout(timer);
		else timer = setTimeout(auto, speed);
		$this.attr('title', _txt).text(_txt);
 
		return false;
	});
 
	// 自動輪播使用
	function auto(){
		_index = (_index + 1) % $li.length;
		var $tmp = $li.eq(_index).click();
 
		var _indexCount = Math.floor(_index / _set);
		// 判斷是否要切換縮圖的顯示組數
		if($controls != null && (_index == (_countIndex + 1) * _set || _index == 0) && _countIndex != _indexCount){
			$next.click();
			$tmp.animate({opacity: 1}, _animateSpeed, function(){
				$tmp.addClass('current').siblings('.current').removeClass('current');
			})
		}
	}
});

其中讓筆者較頭痛的部份是輪播時判斷是否要切換縮圖顯示組數的部份，若各位有較好的判斷方法的話，請留言分享一下：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8

var _indexCount = Math.floor(_index / _set);
// 判斷是否要切換縮圖的顯示組數
if($controls != null && (_index == (_countIndex + 1) * _set || _index == 0) && _countIndex != _indexCount){
	$next.click();
	$tmp.animate({opacity: 1}, _animateSpeed, function(){
		$tmp.addClass('current').siblings('.current').removeClass('current');
	})
}

來看一下預覽結果及效果

不過還有個較特別的地方，在奧運官網原本的效果是不管滑鼠有沒有移到圖片上都不會停止計時器，唯有按下暫停鈕才會停止。因此筆者也就依此方式來設計此範例效果囉！

最後~您覺得這範例跟奧運官網的效果的相似度有多少呢？

範例 1

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

23 筆針對 [jQ]用 jQuery 做畫廊 – 仿 2012 倫敦奧運官網首頁輪播效果 的迴響

1 2
1 2

發表迴響