
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-tw">
<head>
<meta name="viewport"  content="width=600,initial-scale=1,user-scalable:no"  >
<meta name="Generator" content="EditPlus">
<meta name="Author" content="男丁格爾's 脫殼玩">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>交錯式百葉窗切換效果 - 上下進場</title>
<style type="text/css">
	img { 
	max-width:100%; 
	myimg:expression(onload=function(){ 
	this.style.width=(this.offsetWidth > 720)?"720px":"auto"});
	} 
	#abgne-block-20120527 {
		width: 100%;	/* 圖片的寬 */
		height: 720px;	/* 圖片的高 */
		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;
	}
	#div img { 
max-width:600px; 
myimg:expression(onload=function(){ 
this.style.width=(this.offsetWidth > 600)?"600px":"auto"});
} 
</style>
<script type="text/javascript">
	$(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);
	});
</script>
</head>

<body>
	<div id="abgne-block-20120527" class="img">
		<a href="#"><img src="/userUpload/images/07.jpg" /></a>
		<a href="#"><img src="/userUpload/images/02.jpg" /></a>
		<a href="#"><img src="/userUpload/images/03.jpg" /></a>
		<a href="#"><img src="/userUpload/images/02.jpg" /></a>
		<a href="#"><img src="/userUpload/images/05.jpg" /></a>
	</div>
</body>
</body>
</html>