Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 仿 MSN 台灣首頁控制器廣告展示

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

最近剛好逛到 MSN 台灣的網站，看到它首頁的廣告展示效果蠻簡單直覺的

它預設會自動輪播切換下一張圖片，也會顯示該圖片的描述文字及目前顯示的筆數，而下方的按鈕也能切換及控制是否輪播的功能哩！所以筆者手癢就把它偷來跟大家分享囉~

先準備個簡單的 HTML：

檢視原始碼 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
28
29
30
31
32
33
34
35
36

<body>
	<div id="abgne-block-20120509">
		<ul class="items">
			<li>
				<a href="#">
					<img src="images/DSC_0342.JPG" alt="每一個都讓人流口水的義式麵包" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/DSC_0385.JPG" alt="用來垃圾分類的綠寶、白寶、黃寶及藍寶" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/DSC_0424.JPG" alt="龐貝城中用來表演的露天劇場" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/DSC_0535.JPG" alt="龐貝城中用來祭祀用的神壇" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/DSC_0575.JPG" alt="我來到一個島叫做卡不里島" />
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/DSC_0595.JPG" alt="Hotel Pazziella 的外觀" />
				</a>
			</li>
		</ul>
	</div>
</body>

一樣都是很熟悉的 ul li，但要特別注意的是其中的圖片都需要加上 alt 屬性才行，因為這是接下來要用的描述文字的來源。接著再加上 CSS：

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

#abgne-block-20120509 {
	width: 300px;	/* 圖片的寬 */
	height: 242px;	/* 圖片的高 + #abgne-block-20120509 .desc 的高 + #abgne-block-20120509 .controls li a 的高 */
	overflow: hidden;
}
#abgne-block-20120509 ul, #abgne-block-20120509 ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#abgne-block-20120509 ul.items {
	width: 300px;	/* 圖片的寬 */
	height: 201px;	/* 圖片的高 */
	overflow: hidden;
}
#abgne-block-20120509 a img {
	border: none;
}

基本上啦～現在這樣什麼鬼都看不出來。因為其中的描述文字及控制器等等的元素都是要用程式來產生的，所以再來看 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
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

$(function(){
	// 取得 #abgne-block-20120509 及 ul li 等相關元素
	// _index 用來設定預設顯示第幾個
	// speed 是用來控制輪播的速度用
	var $block = $('#abgne-block-20120509'), 
		$ul = $block.find('ul'), 
		$li = $ul.find('li'), 
		_index = 0, 
		timer, speed = 1000, _isHover = false;
 
	// 一一產生用來放置描述文字的區塊
	// 並產生控制器用的 ul 及 li
	// 其中還加入一個用來顯示目前筆數 / 總筆數的元素
	var $desc = $('<span class="desc"></span>'), 
		$prev = $('<li class="prev"><a href="#" class="prev" title="上一張"></a></li>'), 
		$pauseAndPlay = $('<li><a href="#" class="pause" title="自動播放"></a></li>'), 
		$next = $('<li><a href="#" class="next" title="下一張"></a></li>'), 
		$last = $('<li><span class="last">' + (_index + 1) + ' / ' + $li.length + '</span></li>'), 
		$controls = $('<ul class="controls"></ul>').append($prev, $pauseAndPlay, $next, $last);
 
	// 把描述區塊及控制器加到 $block 中
	$block.append($desc, $controls);
 
	// 控制顯示圖片、描述文字及目前筆數使用
	function create(){
		var $item = $li.hide().eq(_index).show();
		$desc.text($item.find('img').attr('alt'));
		$last.find('.last').text((_index + 1) + ' / ' + $li.length);
	}
 
	// 當點擊到 $controls 上的 li 時控制切換上下張及控制是否輪播
	$controls.on('click', 'li', function(){
		var $this = $(this), 
			$a = $this.find('a');
 
		// 如果點到的是上下張鈕
		if($a.hasClass('prev') || $a.hasClass('next')){
			// 計算要顯示那一張
			_index = ($a.hasClass('prev') ? _index - 1 + $li.length : _index + 1) % $li.length;
			create();
		}else{
			// 如果點到的是暫停或是播放鈕
			$a.toggleClass('pause play').attr('title', $a.hasClass('pause') ? '自動播放' : '暫停');
			$a.hasClass('pause') && !_isHover ? timer = setTimeout(auto, speed) : clearTimeout(timer);
		}
 
		return false;
	});
 
	$block.hover(function(){
		// 當滑鼠移入 $block 時停止計時器
		_isHover = true;
		clearTimeout(timer);
	}, function(){
		// 當滑鼠移出 $block 時啟動計時器
		// 如果現在 $pauseAndPlay a 的 class 中有 .pause 的話, 才啟動計時器
		_isHover = false;
		if($pauseAndPlay.find('a').hasClass('pause')) timer = setTimeout(auto, speed);
	});
 
	// 自動輪播使用
	function auto(){
		$next.click();
		timer = setTimeout(auto, speed);
	}
 
	// 啟動計時器
	timer = setTimeout(auto, speed);
 
	// 執行預設
	create();
});

因為描述及控制器都是程式加上去的，所以也別忘了要補上相關的 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

#abgne-block-20120509 .desc {
	display: block;
	font-weight: 700;
	line-height: 24px;
	font-size: 16px;
	height: 24px;
	overflow: hidden;
}
#abgne-block-20120509 .controls li {
	float: left;
}
#abgne-block-20120509 .controls li a {
	display: block;
	width: 17px;	/* 圖示的寬 */
	height: 19px;	/* 圖示的高 */
	background: url(images/controls.png) no-repeat 0 0;
}
#abgne-block-20120509 .controls li a.prev:hover {
	background-position: 0 -19px;
}
#abgne-block-20120509 .controls li .next {
	background-position: -51px 0;
}
#abgne-block-20120509 .controls li .next:hover {
	background-position: -51px -19px;
}
#abgne-block-20120509 .controls li .pause {
	background-position: -17px 0;
}
#abgne-block-20120509 .controls li .pause:hover {
	background-position: -17px -19px;
}
#abgne-block-20120509 .controls li .play {
	background-position: -34px 0;
}
#abgne-block-20120509 .controls li .play:hover {
	background-position: -34px -19px;
}
#abgne-block-20120509 .controls li .last {
	margin-left: 10px;
	line-height: 19px;	/* 圖示的高 */
}

完成後就能來預覽效果囉~

範例 1

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

11 筆針對 [jQ]用 jQuery 做廣告 – 仿 MSN 台灣首頁控制器廣告展示 的迴響

  5. 請教一下，
    我的next 按鈕，不知為什麼被擠到下面去，低了一個按鈕的高度(一般和over的狀態位置一樣)
    改了下段這段css 也沒用耶。
    #abgne-block-20120509 .controls li .next {
    background-position: -51px 0;
    }

    • 如果直接用我的範例不會的話, 那麼這要看你的範例檔案才知道為什麼了~
      可以的話弄個簡單但有問題的範例寄給我看看

      • 謝謝老師! 現在ok了。
        發現我原先的css 裡面就有 .next 的名稱
        原以為與 #abgne-block-20120509 .controls li .next 父層級不同就沒關係

        原來還是有影響到，謝謝你!

  6. 感謝這教學網
    但是仿 MSN 台灣首頁控制器廣告展示,的按鈕出不來,是聯結那裡
    controls.png又是什麼
    滑過與按下,是聯結那裡

  7. 男丁老師您好，因為在您這搜尋有關廣告輪播的語法教學，剛好看到這一篇，因此想請教一下，如果說像是MSN美國網站 http://www.msn.com/ ，它的上方有一塊圖文混排的頭條新聞輪播，也可以利用JQ來表現嗎？還是需要用到其他語法呢？

    Many thanks

    • 是可以做到的, 就是基本的 slidershow 效果, 只是它滑動的區塊裡面放的有圖或是圖文混合而已.

發表迴響