男丁格爾's 脫殼玩

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

因為筆者實在沒什麼美術天份，所以範例中都是用很簡單的區塊背景顏色來表示，但很多同學都想要換成自己設計的美美圖示或項目時可能就會遇到一些問題。所以今天的範例中就多加了一些小技巧，讓各位能很簡單的替換成自己的圖片。

一樣是用 ul li 來當廣告項目，其中共有 6 個 li 及圖片(圖片來源：梅問題教學網)：

檢視原始碼 HTML

<body>
	<div id="abgneBlock">
		<div id="player">
			<ul class="list">
				<li><a target="_blank" href="#"><img src="images/GoldRedenvelope00.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/laluz00.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/MazingerZ00.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/MetalTableware00.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/RuiShidao00.jpg"></a></li>
				<li><a target="_blank" href="#"><img src="images/uWang00.jpg"></a></li>
			</ul>
		</div>
	</div>
</body>

接著再用 CSS 來修飾：

檢視原始碼 CSS

#abgneBlock {
	padding: 5px;
	width: 450px;
	height: 286px;
	border: 1px solid #ccc;
}
#abgneBlock #player {
	position: relative;
	overflow: hidden;
	height: 100%;
}
#abgneBlock ul.list {
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	width: 100%;
	height: 100%;
}
#abgneBlock ul.list li {
	float: left;
	width: 100%;
	height: 100%;
}
#abgneBlock .list img{
	width: 100%;
	height: 100%;
	border: 0;
}

當套上 CSS 後就能看到大概的畫面了：

不過因為限制了區塊的高度，因此只能看到一張廣告圖片而已。所以接下來就用 jQuery 來加上選項，並透過這些選項來控制顯示的廣告圖片。

檢視原始碼 JavaScript

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

我們把選項 ul.playerControl 透過程式來產生並加到區塊中，所以當然得再補上相關的 CSS 才行：

檢視原始碼 CSS

#abgneBlock ul.playerControl {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	bottom: 5px;
	right: 5px;
	height: 20px;
}
#abgneBlock ul.playerControl li {
	float: left;
	color: #ff99cc;
	text-align: center;
	line-height: 20px;
	width: 20px;
	height: 20px;
	font-family: Arial;
	font-size: 12px;
	cursor: pointer;
	margin: 0px 2px;
	background: url(images/control_ico.gif) no-repeat -21px 0;
}
#abgneBlock ul.playerControl li.current { 
	color: #fff;
	font-weight: bold;
	background-position: 0 0;
}

這樣我們就有相對數量的選項，同時可透過這些選項來控制廣告囉：

且因為筆這在產生這些 li 選項時都有給它們特定的 className，所以如果想要自訂選項圖片的話，只要修改 CSS 就可以了：

檢視原始碼 CSS

#abgneBlock ul.playerControl li {
	color: #ff99cc;
	text-align: center;
	line-height: 20px;
	width: 20px;
	height: 20px;
	font-family: Arial;
	font-size: 12px;
	cursor: pointer;
	margin: 2px 2px;
	text-indent: -9999px;
	background: url(images/control_ico2.gif) no-repeat;
}
#abgneBlock ul.playerControl li.current {
	background-position: 0 -21px;
}
#abgneBlock ul.playerControl li.playerControl_2 {
	background-position: -21px 0;
}
#abgneBlock ul.playerControl li.playerControl_2.current {
	background-position: -21px -21px;
}
#abgneBlock ul.playerControl li.playerControl_3 {
	background-position: -42px 0;
}
#abgneBlock ul.playerControl li.playerControl_3.current {
	background-position: -42px -21px;
}
#abgneBlock ul.playerControl li.playerControl_4 {
	background-position: -63px 0;
}
#abgneBlock ul.playerControl li.playerControl_4.current {
	background-position: -63px -21px;
}
#abgneBlock ul.playerControl li.playerControl_5 {
	background-position: -84px 0;
}
#abgneBlock ul.playerControl li.playerControl_5.current {
	background-position: -84px -21px;
}
#abgneBlock ul.playerControl li.playerControl_6 {
	background-position: -105px 0;
}
#abgneBlock ul.playerControl li.playerControl_6.current {
	background-position: -105px -21px;
}

出來的效果就變的更有...特色！！！

若要加上自動輪播的話，只要再修改一點點程式：

檢視原始碼 JavaScript

$(function(){
	// 先取得必要的元素並用 jQuery 包裝
	// 再來取得 $slides 的高度及設定動畫時間
	var $block = $('#abgneBlock'),
		$slides = $('#player ul.list', $block),
		_height = $slides.find('li').height(),
		$li = $('li', $slides),
		_animateSpeed = 400, 
		timer, _speed = 4000;
 
	// 產生 li 選項
	var _str = '';
	for(var i=0, j=$li.length;i<j;i++){
		// 每一個 li 都有自己的 className = playerControl_號碼
		_str += '<li class="playerControl_' + (i+1) + '">' + (i+1) + '</li>';
	}
 
	// 產生 ul 並把 li 選項加到其中
	// 並幫 li 加上 mouseover 事件
	var $controlLi = $('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).find('li');
	$controlLi.mouseover(function(){
		clearTimeout(timer);
 
		var $this = $(this);
		$this.addClass('current').siblings('.current').removeClass('current');
		// 移動位置到相對應的號碼
		$slides.stop().animate({
			top: _height * $this.index() * -1
		}, _animateSpeed, function(){
			if(!_isOver) timer = setTimeout(moveNext, _speed);
		});
 
		return false;
	}).eq(0).mouseover();
 
	// 當滑鼠移到 $block 時則停止輪播
	// 移出時則繼續輪播
	var _isOver = false;
	$block.mouseenter(function(){
		clearTimeout(timer);
		_isOver = true;
	}).mouseleave(function(){
		_isOver = false;
		timer = setTimeout(moveNext, _speed);
	});
 
	// 用來控制移動的函式
	function moveNext(){
		var _now = $controlLi.filter('.current').index();
		$controlLi.eq((_now+1) % $controlLi.length).mouseover();
	}
});

這樣就有一個能達到廣告效果又能有個人特色的廣告區塊囉。至於要讓廣告是像螃蟹一樣橫著移動的話，只要修改 CSS 樣式及把程式中的 top 改成 left 就可以囉。

範例 1 範例 2 範例 3 範例 4

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

44 筆針對 [jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播的迴響

1 2 3 4 下一頁 »

小豬於 2010-09-23 11:30:00 說：

比較一下有無「自訂選項圖片」的css，是否若要自訂選項圖片一定css要先寫好呢?無法在jquery動態產生相對應的className時，也同時動態用jquery去變更其css嗎?

登入後再回覆
- 男丁格爾於 2010-09-23 11:46:47 說：
  
  如果要用 css 來自訂這些背景圖片的話, 除非是寫死在程式中
  就是自己用 css(obj) 去變更, 但這樣又增加了程式的複雜度
  
  登入後再回覆
小豬於 2010-09-23 13:33:28 說：

會有這樣的問題是因為呈現的內容往往是交給客戶自行設定的，甚至有的客戶也會要求要自行更換「選項圖片」，可是又不能限制客戶一次只能設定幾個，不能多也不能少，若css先寫好，就比較無法達到客戶的要求~!!

登入後再回覆
derek 於 2010-09-23 16:04:49 說：

to 小豬
將li換成img，然後使用相對定位即可

登入後再回覆
derek 於 2010-09-23 20:13:47 說：

to 小豬
也可參考這個插件：仿 Yahoo 滾動式訊息跑馬燈的修改版

小弟剛加入了圖片輪撥功能，增加圖片也很容易，只要下img語法即可

登入後再回覆
derek 於 2010-09-23 20:17:03 說：

註：連結標籤的網址中不能帶參數，所以無法直接貼網址
請至程攝世界論壇的[jQuery 範例教學]版面內就可找到

登入後再回覆
小豬於 2010-09-24 08:52:29 說：

to derek
恩，謝謝，我會試試看!!

登入後再回覆
jack 於 2010-09-30 10:39:02 說：

文中...要修改 CSS 樣式及把程式中的 top 改成 left 就可以囉。
想請問css樣式要修改的地方沒有top的指令
我只在javascript看到有top的指令，我修改了：
將 _height = $slides.height()，改成 _width =$slides.width()
將 top: _height * $this.index() * -1，改成 left: _width*$this.index() *-1
我改了之後，還有將css樣板中，單獨的height改成width，
這樣在try的時候只有一張圖片，想請問大大還要修改什麼？！
另外，我發現圖片的擺設好像不能由上到下擺設...要擺成橫列
在透過程式去抓取圖片位置，這樣思考點不知道有沒有錯誤...

登入後再回覆
derek 於 2010-09-30 14:56:10 說：

to jack
你的出發點是沒有錯，不過要把想法轉為語法，這必須對程式原理及語法要有一定程度了解與熟悉，但這需花時間下功夫的，小弟也才剛摸jQuery不久，下面範例是小弟剛改的，不吝指教。
往左移動範例：http://twcf2.summerhost.info/adclr/

登入後再回覆
derek 於 2010-09-30 15:08:40 說：

奇怪，不能貼連結，標籤好像失效了0.0
到討論區的jQuery 範例教學版面裡面看吧

登入後再回覆
- 男丁格爾於 2010-09-30 15:10:11 說：
  用法有點不對..應該是
  
  檢視原始碼 PHP
  1
  [link href="網址"]
  登入後再回覆
derek 於 2010-09-30 15:21:19 說：

to 男丁兄
喔！原來如此，哈哈，每次都記錯0.0

登入後再回覆
- 男丁格爾於 2010-09-30 18:10:21 說：
  
  這只是小事, 畢竟你願意幫忙回覆問題我就要很感激了。
  這一兩個月有專案都忙的沒什麼時間來一一回覆XD
  
  登入後再回覆

發表迴響取消回覆

抱歉，你必須要登入才能發表迴響喔！

44 筆針對 [jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播 的迴響

發表迴響 取消回覆

44 筆針對 [jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播的迴響

發表迴響取消回覆