男丁格爾's 脫殼玩

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

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

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

<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

#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

$(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

$(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

#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 下一頁 »

lily 於 2011-08-19 18:55:29 說：

請問老師,我的頁面上兩個區塊都用這個範例(#abgneBlock & #abgneBlock2),可是因為兩塊的li數量不一樣,會有輪播不造順序亂跳的情形發生~
請問可以解決嗎?

登入後再回覆
- 男丁格爾於 2011-08-24 09:09:25 說：
  
  程式稍微改寫一下下, 用 each() 的方式來處理整個區塊即可
  
  登入後再回覆
小琉球於 2011-09-20 04:17:06 說：

謝謝老師還很完整的把細節都標註出來，
這樣要修改就更容易看懂了!!
也一直找這樣的特效好久了，但是都不太會修改
真的非常的謝謝唷!

登入後再回覆
- 男丁格爾於 2011-09-20 09:14:01 說：
  
  只要畫面排的出來，接著的動畫效果就交給 jQuery 囉。
  
  登入後再回覆
rogerhu0416 於 2011-09-30 17:53:33 說：

老師請問一下，
我套用了這個套件，怎麼會在第12張以後就錯亂了，
可以解救我一下嗎？
感謝。
http://www.tava555.org.tw/hope.html

登入後再回覆
- 男丁格爾於 2011-10-04 10:02:48 說：
  
  把 #abgneBlock ul.list 的 width 變成 999999px;
  
  登入後再回覆
rogerhu0416 於 2011-09-30 20:15:53 說：

不好意思老師我用了另外一個版本，
在第12張以後會出問題的改成這個網址：
http://www.tava555.org.tw/hope_test.html

登入後再回覆
Hank 於 2011-10-23 12:52:05 說：

老師請問一下如何把範例2改成淡入淡出呢?主要是要修改哪裡呢~謝謝

登入後再回覆
- 男丁格爾於 2011-10-24 08:55:22 說：
  
  淡入淡出的範例可以參考：http://abgne.tw/jquery/apply-jquery/jquery-fade-in-out-image.html
  
  登入後再回覆
Annabelle 於 2011-12-02 10:24:35 說：

老師
我想請問個很不專業問題orz
假如我想把圓點按鈕改放置到輪播圖片的右下方
那我要如何修改?

登入後再回覆
Annabelle 於 2011-12-02 10:31:15 說：

剛剛有試著把return (_width - $(this).width()) / 2;
這行拿掉就可以得到效果
不知道這樣改是否正確?

謝謝老師

登入後再回覆
- 男丁格爾於 2011-12-08 13:22:44 說：
  
  這也是可以啦, 拿掉後你應該也能用 css 去設定它
  
  登入後再回覆
Andy 於 2012-02-02 11:28:13 說：

老師您好，我想請問一下為什麼圖片看起來沒有那麼清楚（銳利），是因為我將尺寸改大的關係嗎？

登入後再回覆
- 男丁格爾於 2012-02-02 12:36:51 說：
  
  如果單純用 html 或 css 來改變顯示大小的話，是有可能會造成這問題的。
  
  登入後再回覆
Andy 於 2012-02-02 12:58:57 說：

我圖片尺寸也是一樣大小，不是用語法將它放大。請問該如何解決圖片不銳利的問題呢？謝謝老師。

登入後再回覆
- 男丁格爾於 2012-02-02 13:13:20 說：
  
  也許這要交給對影像專門的梅干來處理了XD
  
  登入後再回覆
  - jocosn 於 2012-03-22 15:38:44 說：
    
    男丁大大，原來你也是搞笑咖哦！
    
    登入後再回覆
    - 男丁格爾於 2012-03-22 15:52:01 說：
      
      唔~這是術業有專攻!!
      
      登入後再回覆
Andy 於 2012-02-02 15:50:51 說：

對不起，老師您可能誤會我意思了。我是指就純粹網站上顯示出圖片的感覺沒那麼清晰，但是檔案是清楚的。

登入後再回覆
- 男丁格爾於 2012-02-03 12:39:37 說：
  
  如果你單純在一個 html 中加入一個 img 後也是覺得不清晰的話, 我想這可能就是因為網頁瀏覽器的關係吧!!!
  
  登入後再回覆