WY纵向循环切换焦点区域

作者:dangbao 日期:2009-04-28

字体大小: 小中大

门户近来比较流行的一种TAB切换,版式上左面是一块大的焦点区域，一般是放一张吸引人眼球的图片。右面则是现实与图片关联的标题。自动纵向顺序切换TAB内容，当然鼠标经过任何一个右边的标题，左边会跳到与之相关联的焦点区域。

Html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纵向循环播放焦点图</title>
<style>
*{margin:0;padding:0;border:0;list-style:none}
.focusPic{width:500px; margin:0 auto; clear:both; text-align:center; border:1px solid #ccc;}
.focusPic .focusTitle{width:240px;float:right; font-size:14px; text-align:left;}
.focusPic .focusTitle li{height:28px; line-height:28px; cursor:pointer; font-size:12px; padding-left:10px; }
.focusPic .focusTitle li a ,.focusPic .focusTitle li a:visited { color:#000;}
.focusPic .focusTitle li a:hover {color:#bc2931;}
.focusPic .focusTitle .current a ,.focusPic .focusTitle .current a:visited { color:#bc2931;}
.focusPic .focusTitle .current a:hover {color:#bc2931;}
.focusPic #focusMenu li.current{background:#efefef;font-weight:bold;color:#bc2931;}
.focusPic #focusLeft{width:250px;overflow:hidden; float:left;background:#efefef;font-size:14px;line-height:100px;font-weight:bold;height:168px;}
.focusPic #focusLeft li{display:none;}
.focusPic #focusLeft li.current{display:block;}
</style>
</head>

<body>
<div class="focusPic">
<ul id="focusLeft">
<li class="current">内容区1</li>
<li>内容区2</li>
<li>内容区3</li>
<li>内容区4</li>
<li>内容区5</li>
<li>内容区6</li>
</ul>
<div class="focusTitle">
<ul id="focusMenu">
<li class="current"><a href="#">猪流感“撼”动全球金融市场</a></li>
<li ><a href="#">直播金融企业社会责任论坛</a></li>
<li ><a href="#">独家发布08特许连锁经营百强榜</a></li>
<li ><a href="#">世行、IMF开启代表权改革时代</a></li>
<li><a href="#">放心变频 美的空调</a></li>
<li><a href="#">飞度领衔经济车型五星安全</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<script language="javascript" type="text/javascript">
//<![CDATA[
var $ = function(id) {
	return document.getElementById(id);
};
Function.prototype.bind = function() {
	if (arguments.length < 2 && arguments[0] == null) {
		return this;
	}
    var __method = this, args = $A(arguments), object = args.shift();
    return function() {
		return __method.apply(object, args.concat($A(arguments)));
    };
};
var isArray = function(testVar) {
	return Array == testVar.constructor ? 1 : String != testVar.constructor && null != testVar.length && !testVar.alert && !testVar.nodeType ? 2 : 0;
};
var $A = function(variable) {
	switch (isArray(variable)) {
		case 1:
			return variable;
		case 2:
			var arr = [], i = -1, len = variable.length;
			while (++i < len) {
				arr[i] = variable[i];
			}
			return arr;
		default:
			return [variable];
	}
};
var addClass = function(elem, className) {
	if ((" " + elem.className + " ").indexOf(" " + className + " ") == -1) {
		if (elem.className == "") {
			elem.className = className;
		} else {
			elem.className += (" " + className);
		}
	}
};
var removeClass = function(elem, className) {
	var newClass = (" " + elem.className + " ").replace(" " + className + " ", " ");
	elem.className = newClass.substr(1, newClass.length - 2);
};
var addEvent = function(elem, eventName, handler) {
	if (elem.addEventListener) {
		elem.addEventListener(eventName, handler, false);
	} else if (elem.attachEvent) {
		elem.attachEvent("on" + eventName, handler);
	}
};
function Slide(menus, contents, css, eventName, interval) {
	var curSeq = 0, length = contents.length, timerIds = [], isStopped;
	if (menus && length != menus.length) {
		throw new Error("the amount of menus and contents is not equal");
	}
	
	var hide = function(seq) {
		removeClass(contents[seq], css);
		if (menus) {
			removeClass(menus[seq], css);
		}
	};
	
	var show = function(seq) {
		addClass(contents[seq], css);
		if (menus) {
			addClass(menus[seq], css);
		}
		curSeq = seq;
	};
	
	this.showNext = function() {
		var next = curSeq + 1;
		if (next >= length) {
			next = 0;
		}
		var i = length;
		while (--i >= 0) {
			if (i != next) {
				hide(i);
			} else {
				show(i);
			}
		}
	};
	
	this.change = function(event) {
		if (this != menus[curSeq]) {
			var i = length;
			while (--i >= 0) {
				if (menus[i] != this) {
					hide(i);
				} else {
					show(i);
				}
			}
		}
		e = window.event || event;
		e.cancelBubble = true;
	};
	
	this.play = function(speed) {
		isStopped = false;
		timerIds.push(setInterval(this.showNext.bind(this), speed));
	};
	
	this.pause = function() {
		isStopped = true;
		var i = length;
		while (--i >= 0) {
			clearInterval(timerIds[i]);
			timerIds.splice(i, 1);
		}
	};
	
	var i = length;
	while (--i >= 0) {
		addEvent(menus[i], eventName, this.change.bind(menus[i]));
		if (interval > 0) {
			addEvent(menus[i], "mouseover", this.pause);
			addEvent(menus[i], "mouseout", this.play.bind(this, interval));
		}
	}
	if (interval > 0) {
		this.play(interval);
	}
}
var focusImg = new Slide($("focusMenu").getElementsByTagName("li"), $("focusLeft").getElementsByTagName("li"), "current", "mouseover", 3000);
//]]>
</script>
</body>

Tags: 焦点图门户 tab

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

网摘收藏:

相关日志:

评论: 0 | 引用: 0 | 查看次数: -

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.