js
var Ex = function (o)
{ for (var k in o) this[k] = o[k]; return this }
//遍历这个o对象中的所有属性;
var UI = function (id) { return document.getElementById(id) }
/////返回某个对象下的某个标签集合;
////UIs此时是个数组类型;
var UIs=function (tag){return Ex.call([],this.getElementsByTagName(tag))}
var Each = function (a, fn) { for (var i = 0; i < a.length; i++) fn.call(a[i], i, a) }
//fn调用数组中每一个元素作为参数;
var dhooo=function (ini){ this.bind(ini,this); this.autoIndex=0; };
//调用自己内部的bind prototype方法.//定义自己对象的一个autoIndex属性;
//调用Ex公用方法,进行定义dhooo这个对象的两个prototype方法,并返回dhooo这个对象;
Ex.call(dhooo.prototype, { //bind的原型方法;
//ini参数代表自己临时顶替dhoo0的一个对象,me参数代表dhooo自己这个对象;
bind: function (ini, me) {
//滚动的方向是向上么,是的话, 那么dir=scrollTop,不然就等于scrollLeft;
//利用UI公用函数取得ini中contentId属性的ID.调用的父容器;
var dir = ini.dir == 'top' ? 'scrollTop' : 'scrollLeft', pan = UI(ini.contentID);
//定义start方法为bind函数的内部方法;
//ini.btns值是一个数值,利用Each方法,将
//匿名函数调用ini.btns这个数组的元素作为参数传给自己,这里this实际代表ini.btns里的一个元素;
var start=function (o){ Each(ini.btns,function(){this.className=''}); o.className = ini.className;
//这个对象的className=ini的class me.autoIndex = o.index;
//父对象调用自己的begin prototype方法,开始跑了..
//begin参数为'跑在第几个','显示的容器是那个','总共有几个','往那个方向滚动';
me.begin(o.index,pan,ini.len,dir); };
//当显示的容器受鼠标划过时.me对象就要暂停;
pan.onmouseover=function (){me.stop=true};
Each(ini.btns,function (i){ this.index=i; this.onmouseover=function (){me.stop=true;start(this)};
pan.onmouseout=this.onmouseout=function(){me.stop=false} });
var auto=function(){
if (!me.stop) {
//超过4时,重置为0;并让
me.autoIndex=+me.autoIndex; me.autoIndex=me.autoIndex==4?0:++me.autoIndex; start(ini.btns[me.autoIndex]); } };
//如果处于自动姿态,那么一秒后,自动在执行一次;
if(ini.auto)this.autoPlay=window.setInterval(auto,1000); }
//i代表当前显示的第几个,步长,总共几个.方向; ,
begin:function (i,o,len,dir){ (function (me){ clearInterval(me.only);
//清除定时一下;防止占用过高的cpu;
me.only=setInterval(function ()
{ var diff=(i*len-o[dir])*0.1; o[dir]+=Math[diff>0?'ceil':'floor'](diff); if(diff==0)clearInterval(me.only); },10) })(this) } })
//作图的鼠标轮换 new dhooo({ btns:UIs.call(UI('myTab_btns1'),'LI') ,className:'hot' ,contentID:'main1' ,len:360 });
//右图的鼠标轮换 new dhooo({ btns:UIs.call(UI('myTab_btns2'),'LI') ,className:'hot' ,contentID:'main2' ,len:190 ,dir:'top' ,auto:true });