Home » jQuery 應用

[jQ]用 jQuery 做廣告 – 交錯式百葉窗切換效果

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

現在很多廣告輪播效果都有做出類似百葉窗的交錯進場切換方式，這其實是利用了多個區塊及背景圖片座標控制的方式來達成，所以今天筆者會教各位如何做出類似的效果。

首先準備個簡單的 HTML 內容：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9

<body>
	<div id="abgne-block-20120527">
		<a href="#"><img src="images/DSC_0668.JPG" /></a>
		<a href="#"><img src="images/DSC_0952.JPG" /></a>
		<a href="#"><img src="images/DSC_1147.JPG" /></a>
		<a href="#"><img src="images/DSC_1838.JPG" /></a>
		<a href="#"><img src="images/DSC_1882.JPG" /></a>
	</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

#abgne-block-20120527 {
	width: 720px;	/* 圖片的寬 */
	height: 420px;	/* 圖片的高 */
	overflow: hidden;
}
#abgne-block-20120527 a {
	position: absolute;
	top: 0; 
	left: 0;
}
#abgne-block-20120527 a img {
	border: none;
}
 
/* 以下是針對選單按鈕設定 */
#abgne-block-20120527 .abgne-controls {
	list-style: none; 
	position: absolute;
	margin: 0;
	padding: 0;
	left: 30px;
	bottom: 40px;
	height: 20px;
}
#abgne-block-20120527 .abgne-controls li {
	float: left;
	width: 35px;
	height: 35px;
	line-height: 35px;
	font-size: 20px;
	font-weight: 900;
	text-align: center;
	cursor: pointer;
	margin-right: 2px;
	color: #0cf;
	background-color: #fff;
}
#abgne-block-20120527 .abgne-controls li.current { 
	color: #fff;
	background-color: #0cf;
}

其中的 .abgne-controls 主要用在接下來產生的選單按鈕使用，若不希望出現選單按鈕的話，可以把它設為隱藏就可以了。接下來就先來看完整的 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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

$(function(){
	// 先取得 #abgne-block-20120527 及其相關區塊及元素
	// 並依計算出每等份的寬度
	var _slices = 9,	// 切成幾等份
		_index = 0,		// 預設顯示第幾個
		_zIndex = 999, 
		$block = $('#abgne-block-20120527').css('position', 'relative'), 
		$slides = $block.find('a').css('z-index', _zIndex).hide(), 
		_width = $block.width(), 
		_height = $block.height(), 
		_sliceWidth = _width / _slices,	// 每等份的寬度
		_lastSliceWidth = _sliceWidth + (_width - _sliceWidth * _slices),	// 剩於的寬度
		_img = $slides.eq(_index).show().find('img').attr('src'), 
		timer, 
		speed = 2000,	// 輪播速度
		_animateSpeed = 600,	// 動畫速度
		_isHover = false,	// 滑鼠是否移到 $block 上
		_isComplete = true;	// 動畫是否已全部執行完
 
	// 依 _slices 數量來產生相對應的 div 區塊
	var _sliceDiv = '', _control = '';
	for(var i=0;i<_slices;i++){
		var _w = i == _slices - 1 ? _lastSliceWidth : _sliceWidth, _l = i * _sliceWidth;
		_sliceDiv += '<div class="abgne-slice slide-' + i + '" style="left:' + _l + 'px;top:0;width:' + _w + 'px;height:100%;background-image:url(' + _img + ');background-position:-' + _l + 'px 0;position:absolute;background-repeat:no-repeat;"></div>';
	}
 
	// 依 $slides 數量來產生按鈕
	for(var i=0;i<$slides.length;i++){
		_control += '<li class="abgne-control control-' + (i + 1) + '">' + (i + 1) + '</li>';
	}
 
	// 分別把 div 區塊及按鈕加入到 $block 中
	var $abgneSlides = $block.append(_sliceDiv, '<ul class="abgne-controls">' + _control + '</ul>').find('.abgne-slice'), 
		$abgneControls = $block.find('.abgne-controls').css('z-index', _zIndex + 2).find('li').eq(_index).addClass('current').end();
 
	// 當點擊到 .abgne-controls li 時
	$abgneControls.click(function(){
		// 若動畫未完成前不接受其它新的事件
		if(!_isComplete) return;
 
		var $this = $(this), 
			$slide = $slides.eq($this.index()), 
			_completeTotal = 0;
 
		// 若現在顯示的跟點擊到的是同一個時, 就不處理
		if($this.hasClass('current')) return;
 
		// 幫點擊到的 li 加上 .current, 並移除上一個 .current 
		$this.addClass('current').siblings('.current').removeClass('current');
		_isComplete = false;
		_index = $this.index();
 
		// 取得相對應的圖片的路徑
		_img = $slide.find('img').attr('src');
		// 先讓每一個區塊的背景圖片為剛剛取得的圖片
		// 並進行動畫
		$abgneSlides.each(function(i){
			var $ele = $(this);
			$ele.css({
				top: i % 2 == 0 ? _height : -_height,
				opacity: 0, 
				zIndex: _zIndex + 1, 
				backgroundImage: 'url(' + _img + ')'
			}).stop().animate({
				top: 0, 
				opacity: 1
			}, _animateSpeed, function(){
				$ele.css('zIndex', _zIndex - 1);
				if(i == _slices - 1){
					$block.css('background-image', 'url(' + _img + ')');
					$slide.show().siblings('a:visible').hide();
					_isComplete = true;
					// 當動畫完成且滑鼠沒有移到 $block 上時, 再啟動計時器
					if(!_isHover)timer = setTimeout(auto, speed);
				}
			});
		});
	});
 
	$block.hover(function(){
		// 當滑鼠移入 $block 時停止計時器
		_isHover = true;
		clearTimeout(timer);
	}, function(){
		// 當滑鼠移出 $block 時啟動計時器
		_isHover = false;
		timer = setTimeout(auto, speed);
	});
 
	// 自動輪播使用
	function auto(){
		_index = (_index + 1) % $slides.length;
		$abgneControls.eq(_index).click();
	}
 
	// 啟動計時器
	timer = setTimeout(auto, speed);
});

其中核心的部份是：

檢視原始碼 JavaScript
1
2
3
4
5
6

// 依 _slices 數量來產生相對應的 div 區塊
var _sliceDiv = '', _control = '';
for(var i=0;i<_slices;i++){
	var _w = i == _slices - 1 ? _lastSliceWidth : _sliceWidth, _l = i * _sliceWidth;
	_sliceDiv += '<div class="abgne-slice slide-' + i + '" style="left:' + _l + 'px;top:0;width:' + _w + 'px;height:100%;background-image:url(' + _img + ');background-position:-' + _l + 'px 0;position:absolute;background-repeat:no-repeat;"></div>';
}

這邊會依設定的 _slices 數量來產生相對的區塊，然後再利用絕對座標及背景圖片座標的方式來組出一張完整的圖片，拆開來看應該是長這樣~

假設每個區塊的寬度是 100px 的話，那麼以第 4 個區塊來看，它的座標及背景圖片的關係應該就變這樣

然後又因為座標定位是絕對座標，所以接下來咱們就能自由自在的控制它的進場移動，所以整個效果完成後就是一個類似交錯式的百葉窗效果囉~

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
左右進場效果 會員限定
外掛版本 - abCrossBlinds Slider 1.0
除了可以在同一頁產生多組效果之外。目前有 7 種屬性可以設定, 像是進場方向, 百葉窗數量等等。		 會員限定

13 筆針對 [jQ]用 jQuery 做廣告 – 交錯式百葉窗切換效果 的迴響

  1. 真的是太厲害了

    我可以請教一個小小的問題嗎

    就是如果下載來都是一個html檔案 放上 dropbox 也是有網址可以執行

    請問要怎麼放在拍賣的 html 廣告編輯區呢? 是要甚麼語法讓他執行我上傳的網頁html

    • 沒用過拍賣, 不過它應該不能加入其它現有的網頁吧, 頂多把你現在 html 中的內容一五一十的加到拍賣的編輯器中看有沒有用
      注意的是, 一些檔案的路徑要改成絕對路徑

      • 因為我是有看到 pchome 商店街有人使用你的範例
        我是查裡面的什麼碼的 才找到這^^

        給你參考一下

        http://www.pcstore.com.tw/dawoko/

        請問是大概什麼原理 可以套用上去

        是在 html 編寫程式時要加入特定呼叫才型嗎？

        因為我看有要注意 html css 真的搞的我霧傻傻 ＝ ＝

        還是有在幫人操作？

  3. 請問如果動畫上面有選單~如何讓下拉選單在動畫上面?
    因為我試了您的方式~結果本來的選單變成在動畫的底層~

  4. 找這個效果找很久了..
    真是太厲害了
    但剛剛我到CSS改了圖片大小
    它在每次換圖完時就閃了一下
    請問我還要修改哪裡??

    謝謝

  6. 您好，我想請問，為什麼不論我依照您的語法，還是我自已的方法去套jquery，都不會有動作呢？
    內容跟css都有，但是就是jquery的效果沒反應，可以跟我解答嗎？

  7. 大大您好:

    我想請問這兩段，這兩個變數值是一樣的，還是有什麼特殊涵義嗎?

    _sliceWidth = _width / _slices, // 每等份的寬度
    _lastSliceWidth = _sliceWidth + (_width - _sliceWidth * _slices), // 剩於的寬度

發表迴響