自动切换，标签切换，延时切换，切换
啥？延时切换？自动切换？好吧，我先写好了，看你需求怎么折腾 - -,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> 标签切换 </title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 300px; margin: 0 auto; font: 12px/1.5 'microsoft yahei'; text-align: center; } .box .hd { overflow: hidden; } .box .hd a { float: left; width: 100px; height: 30px; } .box .hd .cur { background-color: #ccc; } .box .bd div { width: 300px; height: 100px; line-height: 100px; background-color: #ccc; } /* 必须样式 */ .box .hd .cur { } .box .bd div { display: none;} </style> </head> <body> <!-- 注意：默认选项的栏目有class名，默认切换内容有 display:block; --> <div class="box" id="oBox"> <div class="hd"> <a class="cur" href="">栏目1</a> <a href="">栏目2</a> <a href="">栏目3</a> </div> <div class="bd"> <div style="display: block;">内容1</div> <div>内容2</div> <div>内容3</div> </div> </div> <script type="text/javascript"> function TabSwitch (conf){ this.obj = conf.obj; this.cur = conf.cur || 'cur'; this.hd = conf.hd; this.bd = conf.bd; this.ev = conf.ev || 'mouseover'; this.delay = conf.delay || 0; this.auto = conf.auto; this.index = 0; if(this.auto){ this.delay = conf.delay || 1000; this.AutoPaly(); }else{ this.Int(); } } TabSwitch.prototype = { bindEvent : function(obj, ev, fn){ var F = function(){ fn.apply(obj, arguments); }; window.addEventListener ? obj.addEventListener(ev, F, false) : obj.attachEvent("on" + ev, F); }, Switch : function(index){ for(var n = 0,len = this.hd.length; n < len; n++){ this.hd[n].className=""; this.bd[n].style.display = "none"; } this.hd[index].className = this.cur; this.bd[index].style.display = "block"; }, Int : function(){ var timer = null,_this = this; for(var i = 0, len = this.hd.length; i < len; i++) { this.hd[i].index = i; this.bindEvent(this.hd[i], this.ev, function(){ _this.index = this.index; if(_this.delay && !_this.auto){ clearTimeout(timer); timer = setTimeout(function(){ _this.Switch(_this.index); },_this.delay); } else{ _this.Switch(_this.index); } }); } }, Auto : function(){ if(this.index >= this.hd.length){this.index = 0;} this.Switch(this.index); this.index ++; }, AutoPaly : function(){ var timer = null,_this = this; clearInterval(timer); timer = setInterval(function(){ _this.Auto(); },_this.delay); this.Events.bindEvent(this.obj, "mouseover", function(){ clearInterval(timer); _this.Int(); }); this.Events.bindEvent(this.obj, "mouseout", function(){ timer = setInterval(function(){ _this.Auto(); },_this.delay); }); } }; window.onload = function (){ var obj = document.getElementById("oBox"), aHeadList = obj.getElementsByTagName("div")[0].getElementsByTagName("a"), aTabList = obj.getElementsByTagName("div")[1].getElementsByTagName("div"); /** * @obj(ID) 自动播放时必选（用于暂停自动播放） * @hd（必选）要切换的头部一组元素 * @bd（必选）要切换的内容一组元素 * @cur(可选，string) 头部选中的class，默认cur * @ev(可选,string) 触发选项卡的事件，默认mouseover * @delay（可选,number）延迟多少毫秒切换，自动播放时默认1000，其他默认0 * @auto（可选,bool）是否自动播放 **/ new TabSwitch({hd:aHeadList, bd:aTabList}); } </script> </body> </html>
