js练手----百度知道的展示效果

昨天无意进到百度知道页面，发现左上边那块的轮换效果不错。就自己写了个，结构，图片，样式都是用它的。

function bdzhidao() {
	this.init.apply(this, arguments)
};
bdzhidao.prototype = {
	current: 0,
	prev: 0,
	interval: 0,
	timer: null,
	autoTimer: null,
	init: function(opts) {
		opts = opts || {};
		var _this = this;
		var tabs_box = this.getId(opts.tabId),
		cons_box = this.getId(opts.conId);
		this.interval = opts.interval || 3000;
		this.cons = this.getEleByClass('li', 'show', cons_box);
		this.tabs = tabs_box.getElementsByTagName('li');
		if (this.cons.length != this.tabs.length) return;
		for (var i = 0,
		len = this.tabs.length; i < len; i++) { (function(i) {
				_this.tabs[i].onclick = function() {
					clearInterval(_this.timer);
					_this.current = i - 1;
					_this.show();
				}
			})(i);
		}
		cons_box.onmouseover = tabs_box.onmouseover = function() {
			clearInterval(_this.autoTimer)
		};
		cons_box.onmouseout = tabs_box.onmouseout = function() {
			if (opts.auto) _this.auto();
		}
		if (opts.auto) this.auto();
	},
	show: function() {
		var _this = this,
		i = 0;
		var cur = ++this.current % this.cons.length;
		var curCon = this.cons[cur],
		curTab = this.tabs[cur];
		this.tabs[this.prev].className = '';
		this.cons[this.prev].style.display = 'none';
		curCon.style.display = 'block';
		curTab.className = 'current';
		this.set(curCon, 0);
		this.prev = cur;
		this.timer = setInterval(function() {
			if (i >= 1) clearInterval(_this.timer);
			i += 0.02;
			_this.set(curCon, i);
		},
		10);
	},
	auto: function() {
		var _this = this;
		this.autoTimer = setInterval(function() {
			_this.show()
		},
		this.interval)
	},
	set: function(el, val) {
		el.style.filter = "alpha(opacity=" + parseInt(val * 100) + ")";
		el.style.opacity = val;
	},
	getEleByClass: function(node, oclass, parent) {
		var oParent = parent || document;
		var eles = [];
		var nodes = oParent.getElementsByTagName(node);
		for (var i = 0,
		len = nodes.length; i < len; i++) {
			var classNames = (nodes[i].className).split(' ');
			for (var n = 0,
			m = classNames.length; n < m; n++) {
				if (classNames[n] == oclass) {
					eles.push(nodes[i]);
				}
			}
		}
		return eles;
	},
	getId: function(el) {
		return el = typeof el == 'string' ? document.getElementById(el) : el;
	}
}

用法：new bdzhidao({tabId:'slider',conId:'rc-list',auto:true,interval:3000 })
tabId，conId是必须的，auto是设置要不要自动执行效果，默认不自动循环。interval当然不是自动循环的时间间隔了，默认间隔为3秒。

结构代码我就不贴出来的，自己去扣或者写一个吧。