Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 左右水平廣告輪播

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

筆者此次要教的範例是把上一次的「上下垂直選項式廣告輪播」改成左右水平的移動,同時還想要把按鈕移動到置中的位置。

這次的 HTML 比上一個少了 #player 的區塊:

1
2
3
4
5
6
7
8
9
10
11
<body>
	<div id="abgneBlock">
		<ul class="list">
			<li><a target="_blank" href="#"><img src="images/01.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/02.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/03.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/04.jpg"></a></li>
			<li><a target="_blank" href="#"><img src="images/05.jpg"></a></li>
		</ul>
	</div>
</body>

同時再用 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
#abgneBlock {
	width: 940px;
	height: 279px;
	position: relative;
	overflow: hidden;
	border: 1px solid #ccc;
}
#abgneBlock ul.list {
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	width: 9999px;
	height: 100%;
}
#abgneBlock ul.list li {
	float: left;
	width: 940px;
	height: 100%;
}
#abgneBlock .list img{
	width: 100%;
	height: 100%;
	border: 0;
}
#abgneBlock ul.playerControl {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	bottom: 5px;
	right: 5px;
	height: 14px;
}
#abgneBlock ul.playerControl li {
	float: left;
	width: 23px;
	height: 14px;
	cursor: pointer;
	margin: 0px 2px;
	background: url(images/rect_ctrl.png) no-repeat 0 0;
}
#abgneBlock ul.playerControl li.current { 
	background-position: -23px 0;
}

最後就是請出 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
$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $block 的高度及設定動畫時間
	var $block = $('#abgneBlock'),
		$slides = $('ul.list', $block),
		_width = $block.width(),
		$li = $('li', $slides),
		_animateSpeed = 600;
 
	// 產生 li 選項
	var _str = '';
	for(var i=0, j=$li.length;i<j;i++){
		// 每一個 li 都有自己的 className = playerControl_號碼
		_str += '<li class="playerControl_' + (i+1) + '"></li>';
	}
 
	// 產生 ul 並把 li 選項加到其中
	// 並幫 li 加上 mouseover 事件
	$('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).css('left', function(){
		// 把 .playerControl 移到置中的位置
		return (_width - $(this).width()) / 2;
	}).find('li').mouseover(function(){
		var $this = $(this);
		$this.addClass('current').siblings('.current').removeClass('current');
		// 移動位置到相對應的號碼
		$slides.stop().animate({
			left: _width * $this.index() * -1
		}, _animateSpeed);
 
		return false;
	}).eq(0).mouseover();
});

其中 .playerControl 的在置中的 left 座標是透過簡單的計算:

檢視原始碼 JavaScript
1
(#abgneBlock 的寬 - .playerControl 的寬) / 2

接著只要當滑鼠移到 .playerControl li 後就能進行廣告的切換顯示了。

若是要讓它能自動輪播展示的話,得再修改一下程式的部份:

檢視原始碼 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
$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $block 的高度及設定動畫時間
	var $block = $('#abgneBlock'),
		$slides = $('ul.list', $block),
		_width = $block.width(),
		$li = $('li', $slides),
		_animateSpeed = 600, 
		// 加入計時器, 輪播時間及控制開關
		timer, _showSpeed = 3000, _stop = false;
 
	// 產生 li 選項
	var _str = '';
	for(var i=0, j=$li.length;i<j;i++){
		// 每一個 li 都有自己的 className = playerControl_號碼
		_str += '<li class="playerControl_' + (i+1) + '"></li>';
	}
 
	// 產生 ul 並把 li 選項加到其中
	var $playerControl = $('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).css('left', function(){
		// 把 .playerControl 移到置中的位置
		return (_width - $(this).width()) / 2;
	});
 
	// 幫 li 加上 click 事件
	var $playerControlLi = $playerControl.find('li').click(function(){
		var $this = $(this);
		$this.addClass('current').siblings('.current').removeClass('current');
 
		clearTimeout(timer);
		// 移動位置到相對應的號碼
		$slides.stop().animate({
			left: _width * $this.index() * -1
		}, _animateSpeed, function(){
			// 當廣告移動到正確位置後, 依判斷來啟動計時器
			if(!_stop) timer = setTimeout(move, _showSpeed);
		});
 
		return false;
	}).eq(0).click().end();
 
	// 如果滑鼠移入 $block 時
	$block.hover(function(){
		// 關閉開關及計時器
		_stop = true;
		clearTimeout(timer);
	}, function(){
		// 如果滑鼠移出 $block 時
		// 開啟開關及計時器
		_stop = false;
		timer = setTimeout(move, _showSpeed);
	});
 
	// 計時器使用
	function move(){
		var _index = $('.current').index();
		$playerControlLi.eq((_index + 1) % $playerControlLi.length).click();
	}
});

除了自動輪播之外,筆者還把切換廣告的事件改成用 .click(),及把選單改成圓點的樣式:

1
2
3
4
5
6
7
8
9
10
11
#abgneBlock ul.playerControl li {
	float: left;
	width: 10px;
	height: 10px;
	cursor: pointer;
	margin: 0px 2px;
	background: url(images/cir_ctrl.png) no-repeat -10px 0;
}
#abgneBlock ul.playerControl li.current { 
	background-position: 0 0;
}

至於是想要用點擊(click)或是當滑鼠移入(mouseover)到選單來判斷切換廣告的時機,這就由各位自行選擇囉!

範例 1 範例 2 範例 3

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

108 筆針對 [jQ]用 jQuery 做廣告 – 左右水平廣告輪播 的迴響

    • 冒昧請教一下,左右兩側箭頭 VS 下方圓形控點的圖片切換方式你覺得有甚麼差別?
      兩者圖片切換方式都一樣,泡製下方圓形控點的程式碼到左右兩側箭頭的 click 事件上後稍做修改就 OK 了。所以自己手動修改並不難啊!不懂你的問題在哪,是完全不懂 jQuery 嗎?

      $slides.stop().animate({
      left: _width * $this.index() * -1
      }, _animateSpeed, ..........
      這一段稍做修改,改成對應箭頭滑鼠click事件。
      例如你在 img 內加個 alt 屬性,標計這是第 N 幾張圖,抓出這個alt屬性就知道你目前是第幾張圖,上下張是哪一幅圖自然就知道了,應該不難吧。但是我懶的手動去改,你自己改改看吧。

      • 抱歉,忘記補充說明,我跟男丁大大沒任何關係,越廚代庖回答。
        所果還不行,不知道怎麼動手,但是想拿來做商業應用,可看看右上方的價碼,幫男丁大大製造一點收入。花時間想程式碼、排版貼出來這都要花很多時間。男丁大大這個價碼我覺得真的很平價。
        我是覺得男丁大大肯把程式碼分享出來是佛心來也,但是後續應用主要看個人領悟。你只要懂一點 jQuery 基本應用,應該改的好。

  1. 非常佩服,对Jquery的理解能如此透彻,你的这个轮播切换是我见过最简单,而且解释,性能各方面都非常完美的,代码也非常简介,非常厉害

      • 我移植你的代码后出现了一个问题,在FF,谷歌下面轮播广告出现了问题,animate的计算居然出错了,在IE下全部正常,真让我很崩溃,连问题所在都没办法找到。请教了

        • 你直接用我的範例在 chrome 中也會有問題嗎?若不會的話, 那可能要看到你的 code 才知道問題在那~

          • 没有用你的范例没问题,我昨天用完你的代码都没问题,今天我加了一段自己的JS到页面,不知道会不会跟你的有冲突,还是CSS出了什么问题,我拿昨天备份的出来也没问题,现在就是不知道是什么情况

          • 我是說, 直接瀏覽我的範例是否會有問題?
            另外, 麻煩你看一下 css 及 js 的載入順序, 建議先載入 css 後再載 js(jQuery)

          • 果真如此,要先载入CSS才行,不然谷歌会有问题

          • 是 jQuery 在某次改版後, 它就建議要先載 css 再載 jQuery, 否則就像你一樣會無法正確取得 css 設定的問題。

  2. 男兄你的这个插件虽然好用,但是我发有个效果比这个还好一点,就是当广告到最后一副的时候返回第一幅广告的过程是倒退的形式,但是有一种是直接就到第一幅,我尝试修改你的代码想做到这个效果还是失败了,效果跟这个网站一样http://www.huawei.com/cn/,不知道能否提供修改方法,谢谢

  3. 男丁大大你好,我有個問題和樓上的owen大大一樣的問題,指是我只想讓圖片到最後一張的時候,繼續播下去從第一張開始,而不是倒帶回到第一張,我有試過都不成功,請問要修改哪裡呢?

    老師您是有提到別的範例,但是是有加頁簽的,所以我還是想用這個!:P

  4. 男丁老師您好
    這個應用範例,在Google Chrome瀏覽器中,圖片左邊會殘留大約1px的上一個圖片
    不知道要如何改進這個小小的Bug呢?

  5. 老師您好:
    如果我要最後一張圖顯示完後,直接顯示第一張,不要出現從最後一張回到第一張的效果!這個要做麼修改呢!感謝!

發表迴響