男丁格爾's 脫殼玩

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

基本上廣告的滑動效果作法都是大同小異，會有差別的是在樣式及功能上的改變。像有同學就問到說是否能把「左右水平廣告輪播」的下方加上號碼鈕，甚至還希望多加一對能切換上下張圖片的鈕。

筆者就稍微修改一下 HTML：

<body>
	<div id="abgne-block-20110317">
		<div class="abgne-player">
			<ul class="abgne-list">
				<li><a target="_blank" href="#"><img src="images/a.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/b.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/c.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/d.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/e.jpg"></a></li>
			</ul>
		</div>
		<div class="abgne-control">
			<ul class="arrows"> 
				<li class="prev">&lt;</li> 
				<li class="next">&gt;</li> 
			</ul>
		</div>
	</div>
</body>

這便會發現多了一個新的 .abgne-control 區塊，裡面除了目前看到用來控制上下張的鈕之外，等等還會利用 jQuery 來動態產生相對應數量的號碼鈕清單。

檢視原始碼 CSS

ul, li {
	padding: 0;
	margin: 0;
	list-style: none;
}
#abgne-block-20110317 {
	width: 720px;	/* 圖片的寬 */
	height: 250px;	/* 圖片的高 + 30 */
	border: 10px solid #ddd;
}
.abgne-player {
	width: 720px;	/* 圖片的寬 */
	height: 220px;	/* 圖片的高 */
	position: relative;
	overflow: hidden;
}
.abgne-player ul.abgne-list {
	position: absolute;
	width: 9999px;
	height: 100%;
}
.abgne-player ul.abgne-list li {
	float: left;
	width: 720px;	/* 圖片的寬 */
	height: 100%;
}
.abgne-player ul.abgne-list img{
	width: 100%;
	height: 100%;
	border: 0;
}
.abgne-control {
	height: 24px;
	padding: 3px;
	color: #fff;
	font-size: 13px;
	background: #333;
}
.abgne-control ul {
	float: left;
}
.abgne-control ul li {
	float: left;
	padding: 0 5px;
	line-height: 20px;
	margin: 2px;
	background: #666;
	cursor: pointer;
}
.abgne-control ul.numbers {
	margin-left: 13px;
}
.abgne-control ul li.current {
	background: #fff;
	color:#000;
}
.abgne-control ul li.hover {
	background: #fff;
	color:#000;
}

至於 CSS 的部份只是針對 .abgne-control 的部份來排版用。除了號碼鈕之外，目前就能看到半完成的畫面了：

那說好的號碼鈕呢？！別擔心～接著就看咱們的 jQuey 大顯神通：

檢視原始碼 JavaScript

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $block 的高度及設定動畫時間
	var $block = $('#abgne-block-20110317'),
		$slides = $block.find('ul.abgne-list'),
		_width = $block.width(),
		$li = $slides.find('li'),
		$control = $block.find('.abgne-control'),
		_animateSpeed = 600;
 
	// 設定 $slides 的寬(為了不讓 li 往下擠)
	$slides.css('width', ($li.length + 1) * _width);
	// 產生 li 選項
	var _str = '';
	for(var i=0, j=$li.length;i<j;i++){
		// 每一個 li 都有自己的 className = playerControl_號碼
		_str += '<li class="abgne-player-control_' + (i+1) + '">' + (i+1) + '</li>';
	}
 
	// 產生 ul 並把 li 選項加到其中
	var $number = $('<ul class="numbers"></ul>').html(_str).appendTo($control), 
		$numberLi = $number.find('li');
 
	// 並幫 .numbers li 加上 click 事件
	$numberLi.click(function(){
		var $this = $(this);
		$this.addClass('current').siblings('.current').removeClass('current');
		// 移動位置到相對應的號碼
		$slides.stop().animate({
			left: _width * $this.index() * -1
		}, _animateSpeed);
 
		return false;
	}).eq(0).click();
 
	// 幫 .arrows li 加上 click 事件
	$control.find('ul.arrows li').click(function(){
		var _index = $numberLi.filter('.current').index();
		$numberLi.eq((this.className.indexOf('next')>-1?_index+1:_index-1+$numberLi.length)%$numberLi.length).click();
 
		return false;
	});
 
	// 當滑鼠移到 $control li 上時, 加上 .hover 效果
	// 反之則移除
	$control.find('li').hover(function(){
		$(this).addClass('hover');
	}, function(){
		$(this).removeClass('hover');
	});
});

號碼鈕的數量會隨著 .abgne-list 中的 li 數量而自動的產生，因此使用時就不用再辛苦的自己加上。

若是想讓它能自動輪播的話，則得使用 setTimeout() 等計時器來控制：

檢視原始碼 JavaScript

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $block 的高度及設定動畫時間
	var $block = $('#abgne-block-20110317'),
		$slides = $block.find('ul.abgne-list'),
		_width = $block.width(),
		$li = $slides.find('li'),
		$control = $block.find('.abgne-control'), 
		_animateSpeed = 600, 
		// 加入計時器, 輪播時間及控制開關
		timer, _showSpeed = 3000, _stop = false;
 
	// 設定 $slides 的寬(為了不讓 li 往下擠)
	$slides.css('width', ($li.length + 1) * _width);
	// 產生 li 選項
	var _str = '';
	for(var i=0, j=$li.length;i<j;i++){
		// 每一個 li 都有自己的 className = playerControl_號碼
		_str += '<li class="abgne-player-control_' + (i+1) + '">' + (i+1) + '</li>';
	}
 
	// 產生 ul 並把 li 選項加到其中
	var $number = $('<ul class="numbers"></ul>').html(_str).appendTo($control), 
		$numberLi = $number.find('li');
 
	// 並幫 .numbers li 加上 click 事件
	$numberLi.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();
 
	// 幫 .arrows li 加上 click 事件
	$control.find('ul.arrows li').click(function(){
		var _index = $numberLi.filter('.current').index();
		$numberLi.eq((this.className.indexOf('next')>-1?_index+1:_index-1+$numberLi.length)%$numberLi.length).click();
 
		return false;
	});
 
	// 當滑鼠移到 $control li 上時, 加上 .hover 效果
	// 反之則移除
	$control.find('li').hover(function(){
		$(this).addClass('hover');
	}, function(){
		$(this).removeClass('hover');
	});
 
	// 如果滑鼠移入 $slides 時
	$slides.hover(function(){
		// 關閉開關及計時器
		_stop = true;
		clearTimeout(timer);
	}, function(){
		// 如果滑鼠移出 $block 時
		// 開啟開關及計時器
		_stop = false;
		timer = setTimeout(move, _showSpeed);
	});
 
	// 計時器使用
	function move(){
		$control.find('ul.arrows li.next').click();
	}
});

範例 1 範例 2

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

75 筆針對 [jQ]用 jQuery 做廣告 – 左右水平廣告輪播-附加號碼鈕的迴響

1 2 3 4 5 下一頁 »

anthony 於 2011-03-21 21:27:10 說：

男丁老師：
你之前說的這個請協助我把這個效果加到我的網站 (只要 1,200 元)功能
是用css寫出來的
但找不到相關的範例
能否寫一個範例提供學員參考呢
我想做成像雅虎奇摩首頁上面的網頁搜尋下方那個熱門標籤那樣的滑鼠移動打開
移走隱藏

登入後再回覆
- 男丁格爾於 2011-03-25 09:33:38 說：
  
  我再找時間弄個簡單的範例..
  
  登入後再回覆
ma 於 2011-03-22 11:21:48 說：

請問男丁老師:
若要箭頭符號是考左,而數字是靠右對齊的話,需要改什麼地方呢?謝謝

登入後再回覆
- 男丁格爾於 2011-03-25 09:35:17 說：
  
  你可以試著變更 .abgne-control 中的 ul.arrows 及 ul.numbers 的浮動位置
  
  登入後再回覆
亞米斯於 2011-03-25 15:51:36 說：

請問男丁老師:
我覺得這是很棒的圖片展示方式我自己有能力放到自己的網站的話
還需要付您費用嗎

登入後再回覆
- 男丁格爾於 2011-03-25 15:53:29 說：
  
  不用任何費用啦...只要不把它拿去賣就好
  
  登入後再回覆
ma 於 2011-03-28 14:41:56 說：

請問..輪播的方式若是要一直持續撥放,而不是到最後一張要跳到第一張時往回拉的方式,要如何修改呢? 謝謝

登入後再回覆
- 男丁格爾於 2011-03-29 11:25:41 說：
  
  一般都是每一個 li 都每次變換位置, 但我的做法是整個 ul 一起移動, 所以若是要跳套最後一張要繼續的話...
  我的做法會直接在本來的最後一張圖片那邊再插入一張或是一整組 ul 來控制。
  你可以參考這範例: 仿 Yahoo 滾動式訊息跑馬燈
  
  登入後再回覆
maddison 於 2011-03-31 10:50:57 說：

在firefox下看的話～號碼鈕會跑掉耶～有沒有什麼方法修正呢？

登入後再回覆
- 男丁格爾於 2011-03-31 10:58:13 說：
  
  那是圖片太多的關係..所以按鈕選單比較多就往下擠了
  除非在加強改版, 不然就不要超過24或25張囉(現在是26)
  
  登入後再回覆
moontrip 於 2011-03-31 10:55:30 說：

請問我可以把這些的原始程式碼放到自己寫的程式,再做程式的調整嗎?
(因為你的網站裡有"本網站係採用創用 CC 姓名標示-非商業性-禁止改作 3.0 台灣授權條款授權.")

登入後再回覆
- 男丁格爾於 2011-03-31 10:58:56 說：
  
  拿去用沒關係, 本來是不希望修改文章的內容...
  所以就沒想那麼多, 不過那個授權我改一下XD
  
  登入後再回覆
m396933 於 2011-04-22 09:48:29 說：

請問如何加入會員呢?

登入後再回覆
- 男丁格爾於 2011-04-22 09:52:34 說：
  
  仔細看 blog 的右上角, 可利用本身已有的 google 或 yahoo 帳號來加入會員。
  
  登入後再回覆
kingfore 於 2011-04-28 14:03:13 說：

檔案似乎有問題,下載後解壓縮時出現檔案損壞警告

登入後再回覆
- 男丁格爾於 2011-04-28 14:13:49 說：
  
  我剛下載是解壓OK哩, 所以重新下載再試看看~
  
  登入後再回覆
coyaamyyahoo 於 2011-05-26 16:49:36 說：

請問此效果若想要加上隨機輪播(重整後隨機又不會照順序的播放)，要怎麼改呢?很急需呀~~拜託男丁幫幫忙><感謝

登入後再回覆
- 男丁格爾於 2011-05-30 16:16:38 說：
  
  你是要打散整個原本的順序的嗎?如果是的話, 可以在網頁載入後自己用亂數的方式來重新排列
  
  登入後再回覆
lolovivi.lee 於 2011-06-20 12:55:05 說：

((歡呼))找了好久!!終於找到能讓我看得懂得教學了Q_Q
之前都用FLASH做網站...結果在MAC底下根本看不到...
謝謝男丁格爾大大((跪))

登入後再回覆
- 男丁格爾於 2011-06-21 14:34:51 說：
  
  請平身XD
  
  登入後再回覆