Home » jQuery 應用

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

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

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

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

檢視原始碼 HTML
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 稍微修改裝飾：

檢視原始碼 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()，及把選單改成圓點的樣式：

檢視原始碼 CSS
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 做廣告 – 左右水平廣告輪播 的迴響

1 2 3 4 5 6 7

  1. 男丁老師 你好

    我套用了您這個jQuery 應用在我的網站上,Chrome & Safari 都能正常執行無誤

    但換成IE以後,有時可以正常顯示 有時又不行

    我實在找不出原因在哪JavaScript我沒改過,只改了CSS playerControl 的位置

    會是onload or ready的問題嗎?

    因為我把整個網站每個頁面會使用到的Javascript 都集中在一個js檔,再從外部載入到各個頁面

    謝謝~

  2. 對不起，我對JQuery很不熟，但最近有需要寫一下程式，上面有幾個問題我不懂
    1.第一段javaSript $slides.stop().animate，為何在animate前需要增加stop()我把STOP()刪除好像也沒變
    2.第一段javaSript 的第30行為何需要return false;最後一行為何需要eq(0).mouseover();，這兩部分都刪除好像也可以執行
    3.最後第二段javaSript的40行eq(0).click().end();為何需要按又停不懂哩與$playerControlLi.eq((_index + 1) % $playerControlLi.length).click();這%物件如何求餘數???

    • 1.動畫會累加, 所以當被重覆觸發時, 希望先停掉未完成的, 直接執行新的動畫
      2.return false 主要是為了取消可能會觸發超連結預設的功能用, 而 eq(0).mouseover() 是要先讓第一個 li 先觸發一次 mouseover() 事件
      3.end() 是要讓選擇的元素由 li 再回到 $playerControl, 至於求餘數是用來自動循環輪播切換用

  3. 親愛的版大，

    我參考了國外的skitter jquery 再參考站主的教學，學到了很多實用的範例，
    但我遇到了一個問題想請教站主
    我做了一個skitter jquery slider 網址為以下
    http://blog-imgs-56.fc2.com/e/v/i/evilkiwi/banner3-u99.html

    但每一張輪播圖片我在HTML裡面都有新增 target="_blank" 或 _top
    但實際上在執行時，只有第一張圖片有開新視窗連結的效果，如果去按導航鍵切換圖片後，
    就會失去新開視窗的效果，當我把這個jquery利用 iframe崁在網站裡時，就會出現無限鬼打牆
    請問站主這個狀況該怎麼解決呢?

    如這個網站 http://www.i-search.com.tw
    中間的jquery 去用滑鼠切換其它張圖片時，再按超連結，就會失去_blank效果

    • 可以參考 move() 中的程式, 它就等於是下一張的按鈕, 然後上一張的按鈕, 則是要將 index - 1 才行(要判斷是否小於 0)

  6. 老師,想請問這類的輪播圖,若要有第二張圖才顯示切換小圖,一張則不顯示..該如何設定?
    <? for($i=1;$i

    謝謝

  8. 請問一下 playcontrol 若被圖片覆蓋或看不見要怎麼解決，我已經將position:absolute;了
    但是還是看不到控制選項，請前輩能為我解答嗎?

    • 把圖片改自己要的大小應該就可以了@@
      程式碼裡面的CSS調整
      #abgneBlock {
      width: 940px;
      height: 279px;
      position: relative;
      overflow: hidden;
      border: 1px solid #ccc;
      我沒碰過JQuery不過應該是從這裡改大小吧?@@
      這裡~
      #abgneBlock ul.list li {
      float: left;
      width: 940px;
      height: 100%;
      }
      這裡940px也要改一下
      我是初心者~如果回答錯不要打我XD
      如果對你有幫助就好~^^
      如果講錯的話就請男丁大大幫我修正喔@@

  10. 老師~不好意思~我用您所提供的程式碼修改後,再DW預覽都沒問題,上架後不知道為什麼圖片跑出一張後就全部空白,怎麼滑動都不會回來,來回檢查程式碼也不知道發生甚麼事QAQ
    可以幫幫我嗎?

1 2 3 4 5 6 7

發表迴響