男丁格爾'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 下一頁 »

misiia 於 2012-02-08 15:02:09 說：

請問老師:http://www.shopbop.com/ci/3/lb/brand/haute/haute-hippie.html#page0
這個首頁的質感好棒喔~除了滑動之外還有左右兩側箭頭,不知道可以怎麼修改成這樣呢~感謝您的指導

登入後再回覆
- jocosn 於 2012-03-22 15:22:36 說：
  
  冒昧請教一下，左右兩側箭頭 VS 下方圓形控點的圖片切換方式你覺得有甚麼差別？
  兩者圖片切換方式都一樣，泡製下方圓形控點的程式碼到左右兩側箭頭的 click 事件上後稍做修改就 OK 了。所以自己手動修改並不難啊！不懂你的問題在哪，是完全不懂 jQuery 嗎？
  
  $slides.stop().animate({
  left: _width * $this.index() * -1
  }, _animateSpeed, ..........
  這一段稍做修改，改成對應箭頭滑鼠click事件。
  例如你在 img 內加個 alt 屬性，標計這是第 N 幾張圖，抓出這個alt屬性就知道你目前是第幾張圖，上下張是哪一幅圖自然就知道了，應該不難吧。但是我懶的手動去改，你自己改改看吧。
  
  登入後再回覆
  - jocosn 於 2012-03-22 15:30:41 說：
    
    抱歉，忘記補充說明，我跟男丁大大沒任何關係，越廚代庖回答。
    所果還不行，不知道怎麼動手，但是想拿來做商業應用，可看看右上方的價碼，幫男丁大大製造一點收入。花時間想程式碼、排版貼出來這都要花很多時間。男丁大大這個價碼我覺得真的很平價。
    我是覺得男丁大大肯把程式碼分享出來是佛心來也，但是後續應用主要看個人領悟。你只要懂一點 jQuery 基本應用，應該改的好。
    
    登入後再回覆
Owen 於 2012-03-21 14:13:29 說：

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

登入後再回覆
- 男丁格爾於 2012-03-22 13:02:35 說：
  
  過獎了~我只是用較快速的方式來達成效果, 說不上什麼完美。
  
  登入後再回覆
  - Owen 於 2012-03-23 12:46:06 說：
    
    我移植你的代码后出现了一个问题，在FF，谷歌下面轮播广告出现了问题，animate的计算居然出错了，在IE下全部正常，真让我很崩溃，连问题所在都没办法找到。请教了
    
    登入後再回覆
    - 男丁格爾於 2012-03-23 12:49:54 說：
      
      你直接用我的範例在 chrome 中也會有問題嗎?若不會的話, 那可能要看到你的 code 才知道問題在那~
      
      登入後再回覆
      - Owen 於 2012-03-23 13:31:48 說：
        
        没有用你的范例没问题，我昨天用完你的代码都没问题，今天我加了一段自己的JS到页面，不知道会不会跟你的有冲突，还是CSS出了什么问题，我拿昨天备份的出来也没问题，现在就是不知道是什么情况
      - 男丁格爾於 2012-03-23 13:34:34 說：
        
        我是說, 直接瀏覽我的範例是否會有問題?
        另外, 麻煩你看一下 css 及 js 的載入順序, 建議先載入 css 後再載 js(jQuery)
      - Owen 於 2012-03-23 13:42:40 說：
        
        果真如此，要先载入CSS才行，不然谷歌会有问题
      - 男丁格爾於 2012-03-23 14:03:39 說：
        
        是 jQuery 在某次改版後, 它就建議要先載 css 再載 jQuery, 否則就像你一樣會無法正確取得 css 設定的問題。
Owen 於 2012-04-13 17:39:47 說：

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

登入後再回覆
- 男丁格爾於 2012-04-16 20:44:21 說：
  
  huawei 這應該是最後一張時, 下一次又繼續第一張, 這樣的效果是要讓每一張圖座標都是絕對的才行, 您可以先參考這一篇: 水平滑動式頁籤
  
  登入後再回覆
豆仔於 2012-10-06 16:28:48 說：

想要請教老師如果這種滑動banner想要做到像此網址:
https://www.tsohost.com/
的banner一樣,可以依照不同瀏覽器螢幕的大小自動調整其banner寬度可以怎麼設定呢?

登入後再回覆
- 男丁格爾於 2012-11-16 21:18:42 說：
  
  你可以搜尋一下 "responsive web design"
  
  登入後再回覆
bonny1279 於 2012-10-21 14:14:57 說：

老師你好:我是今天剛加入的會員,謝謝分享這麼棒且完整的語法,真的非常實用!

登入後再回覆
funnynet 於 2012-11-15 02:45:33 說：

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

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

登入後再回覆
- 男丁格爾於 2012-11-16 21:20:25 說：
  
  其實有很多不間斷的範例咧, 例如左右不間斷的商品展示輪播
  
  登入後再回覆
  - funnynet 於 2012-11-17 18:25:08 說：
    
    謝謝老師，這個還有加了邊框，看起來更有設計感，而且還更簡單用，只要看背景圖整個感覺就變了，謝謝你！
    
    登入後再回覆
    - funnynet 於 2012-11-17 18:25:58 說：
      
      是改背景圖啦！打錯字感覺都不對了！:p
      
      登入後再回覆
ps2cats 於 2012-11-21 16:58:27 說：

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

登入後再回覆
無敵大鼎於 2012-12-10 19:00:12 說：

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

登入後再回覆
woa 於 2013-01-08 00:09:34 說：

請問我幫別人架網站，想要呈現您的效果，
可以用您的特效的原始碼嗎？謝謝

登入後再回覆
Jerry 於 2013-01-15 13:22:10 說：

男丁老師~

假如我想把寬度改成100%~

有什麼應該注意的

登入後再回覆
- 男丁格爾於 2013-01-17 09:36:09 說：
  
  可以先試試, 有差的應該就是寬度是否能正常取得
  
  登入後再回覆