这段js特效，能为我解答一下是什么意思吗，最好能写点注释给我

Question

``` auto=null;
timer=null;
var focus=new Function(); 
focus.prototype={
    init:function(){
    this.aTime=this.aTime || 10;
    this.sTime=this.sTime || 5000;
    this.oImg=document.getElementById('focus_m').getElementsByTagName("ul")[0];
        this.oImgLi=this.oImg.getElementsByTagName("li");
        this.oL=document.getElementById('focus_l');
        this.oR=document.getElementById('focus_r');
    this.createTextDom();
    this.target=0;
        this.autoMove();
        this.oAction();    },
    createTextDom:function(){
        var that=this;
        this.oText=document.createElement("div");
        this.oText.className="focus_s";
        var ul=document.createElement('ul');
        var frag=document.createDocumentFragment();
        for (var i=0;i<this.oImgLi.length;i++) {
            var li=document.createElement("li");
            li.innerHTML='<b></b>'; 
if (i==0) {
                li.className="active";
            };
            frag.appendChild(li);
        };
        ul.appendChild(frag);
        this.oText.appendChild(ul);
        this.o.insertBefore(this.oText,this.o.firstChild);
        this.oTextLi=this.oText.getElementsByTagName("li");        },
    autoMove:function(){
        var that = this;   
        auto=setInterval(function(){that.goNext()},that.sTime);},
    goNext:function() {
        this.target=this.nowIndex();
        this.target==this.oTextLi.length-1 ? this.target=0:this.target++;
        this.aStep=(this.target-this.nowIndex())*this.step;
        this.removeClassName();
        this.oTextLi[this.target].className="active";
        this.startMove();    },
    goPrev:function() {
        this.target=this.nowIndex();
        this.target==0 ? this.target=this.oTextLi.length-1 : this.target--; 

        this.aStep=(this.target-this.nowIndex())*this.step;
        this.removeClassName();
        this.oTextLi[this.target].className="active";
        this.startMove();    },
    startMove:function (){
        var that=this;
        var t=0;
        this.timer='';
        function set(){
            if (t>100) {
                clearInterval(that.timer);
            }else {
                for (var i=0;i<that.oImgLi.length;i++) {
                    that.oImgLi[i].style.display='none';
                };
                that.oImgLi[that.target].style.display='block';
                that.setOpacity(that.oImg,t);
                t+=5;};};
timer=setInterval(set,that.aTime);},
    setOpacity:function(elem,level){
        if(elem.filters){ 

            elem.style.filter = 'alpha(opacity=' + level + ')';
            elem.style.zoom = 1;
        } else {
            elem.style.opacity = level / 100;
        };
    },
    nowIndex:function(){
        for (var i=0;i<this.oTextLi.length;i++) {
            if (this.oTextLi[i].className=='active') {
                return i;
                break;}};},
    oAction:function(){
        var that=this;
        for (var i=0;i<this.oTextLi.length;i++) {
            this.oTextLi[i].index=i;
            this.oTextLi[i].onclick=function(){
                clearInterval(auto);
                clearInterval(timer);
                that.setOpacity(that.oImg,100);
                that.target=this.index;
                that.removeClassName(); 

                this.className='active';
                that.startMove();}};
        mouseEnter (that.o,'mouseleave',function(e){
                clearInterval(auto);
                that.autoMove();});
        this.oL.onclick=function(){
            that.goPrev();};
        this.oR.onclick=function(){
            that.goNext();};},
    removeClassName:function(){
        for (var i=0;i<this.oTextLi.length;i++) {
            this.oTextLi[i].className=""};}};
var focusRun=new focus();
focusRun.o=document.getElementById("focus");
function mouseEnter(ele,type,func){
    if(window.document.all)    
        ele.attachEvent('on'+type,func);
    else{//ff
        if(type==='mouseenter')
    ele.addEventListener('mouseover',this.withoutChildFunction(func),false)
        else if(type==='mouseleave') 

    ele.addEventListener('mouseout',this.withoutChildFunction(func),false);
        else
            ele.addEventListener(type,func,false);        };};
function withoutChildFunction(func){
    return function(e){
        var parent=e.relatedTarget;
        while(parent!=this&&parent){
            try{
                parent=parent.parentNode;}
            catch(e){
                break;}}
        if(parent!=this)
        func(e);};};
window.onload=function(){
    focusRun.init();};

Answer 1

很基础的api
document.getElementById通过Id获取dom对象
xxx.getElementsByTagName，通过dom标签名获取xxx对象的dom集合，注意是集合
document.createElement，通过标签名创建dom对象
document.createDocumentFragment，创建文档片段对象
xxx.appendChild，往xxx这个dom中添加dom
xxx.className用于获取或者设置xxx这个dom的样式

然后其他就是一些逻辑控制和dom的内联属性对象操作 xxx,style，设置透明的时候做了兼容判断，如果支持filter就设置filter属性（比如IE8不支持opacity，需要设置filter属性），否则设置opacity属性。

题主有哪些还不理解的可以单独提出来，注释大概如下，题主这个代码太老了，至少7,8年前的代码了

    auto = null
    timer = null;
    //上面2个变量存储setInterval计时器的句柄
    var focus = new Function();//生成一个新的空函数，等价于var focs=function(){};
    focus.prototype = {//设置函数的原型方法，es5面向对象经常用到的
        init: function () {//初始化方法
            this.aTime = this.aTime || 10;//startMove中计时器定时执行的间隔，为传递配置则默认10毫秒
            this.sTime = this.sTime || 5000;//autoMove中计时器定时执行的间隔，为传递配置则默认5000毫秒(5s)
            this.oImg = document.getElementById('focus_m').getElementsByTagName("ul")[0];//获取id为focus_m这个dom下的第一个ul对象，getElementsByTagName返回dom数组，所有要转dom需要[0]取值
            this.oImgLi = this.oImg.getElementsByTagName("li");//获取ul下的所有li
            this.oL = document.getElementById('focus_l');//获取左移动按钮dom
            this.oR = document.getElementById('focus_r');//获取右移动按钮dom
            this.createTextDom();//调用createTextDom创和oImgLi长度一样的导航点容器，由于没有html和样式，猜测是这样
            this.target = 0;//当前播放的图片
            this.autoMove();//开始自动播放计时器
            this.oAction();//调用给导航容器添加事件的方法
        },
        createTextDom: function () {//生成导航的的点使用的
            var that = this;
            this.oText = document.createElement("div");//创建新的div，并往这个div中添加ul，li
            this.oText.className = "focus_s";
            var ul = document.createElement('ul');
            var frag = document.createDocumentFragment();//这个没什么必要，下面的frag.appendChild(li);可以直接改为ul.appendChild(li);去掉ul.appendChild(frag);
            for (var i = 0; i < this.oImgLi.length; i++) {
                var li = document.createElement("li");
                li.innerHTML = '<b></b>';
                if (i == 0) {
                    li.className = "active";
                };
                frag.appendChild(li);
            };
            ul.appendChild(frag);
            this.oText.appendChild(ul);
            this.o.insertBefore(this.oText, this.o.firstChild);
            this.oTextLi = this.oText.getElementsByTagName("li");
        },
        autoMove: function () {//自动播放动画方法
            var that = this;
            auto = setInterval(function () { that.goNext() }, that.sTime);
        },
        goNext: function () {//播放下张图片的方法
            this.target = this.nowIndex();//看nowIndex放解释
            //最后一张则播放第一张，否则播放下一张
            this.target == this.oTextLi.length - 1 ? this.target = 0 : this.target++;
            this.aStep = (this.target - this.nowIndex()) * this.step;//这个变量没用到，目测是用来实现左右移动效果用的，现在的效果为渐变所以没使用
            this.removeClassName();
            this.oTextLi[this.target].className = "active";//设置对应导航点获得焦点样式
            this.startMove();//开始透明渐变动画
        },
        goPrev: function () {//播放上张图片的方法
            this.target = this.nowIndex();
            //这个同理，第一张则切换到最后一张，否则播放上一张图片
            this.target == 0 ? this.target = this.oTextLi.length - 1 : this.target--;
            this.aStep = (this.target - this.nowIndex()) * this.step;
            this.removeClassName();
            this.oTextLi[this.target].className = "active";
            this.startMove();//开始透明渐变动画
        },
        startMove: function () {//透明渐变动画效果方法
            var that = this;
            var t = 0;
            this.timer = '';
            function set() {//设置ul的透明度，从0~100渐变显示出来
                if (t > 100) {
                    clearInterval(that.timer);//透明度达到100后停止动画
                } else {
                    for (var i = 0; i < that.oImgLi.length; i++) {//设置所有图片li容器不显示
                        that.oImgLi[i].style.display = 'none';
                    };
                    that.oImgLi[that.target].style.display = 'block';//显示当前播放到的图片
                    that.setOpacity(that.oImg, t);//设置ul的透明度
                    t += 5;
                };
            };
            timer = setInterval(set, that.aTime);
        },
        setOpacity: function (elem, level) {//设置dom透明度方法
            if (elem.filters) {//支持filter
                elem.style.filter = 'alpha(opacity=' + level + ')';
                elem.style.zoom = 1;
            } else {
                elem.style.opacity = level / 100;
            };
        },
        nowIndex: function () {//获取当前焦点样式的导航下标
            for (var i = 0; i < this.oTextLi.length; i++) {
                if (this.oTextLi[i].className == 'active') {
                    return i;
                    break;
                }
            };
        },
        oAction: function () {
            var that = this;
            for (var i = 0; i < this.oTextLi.length; i++) {//给导航点添加click事件
                this.oTextLi[i].index = i;//自定义属性index存储i的值，这个涉及到闭包，onclick中不能直接使用i变量，除非var改为let，这个题主要了解自己百度下
                this.oTextLi[i].onclick = function () {
                    clearInterval(auto);//清除自动播放计时器
                    clearInterval(timer);//清除透明动画计时器
                    that.setOpacity(that.oImg, 100);//设置容器透明度直接显示
                    that.target = this.index;//设置当前播放到变量下标为当前点击的导航对应的下标
                    that.removeClassName();
                    this.className = 'active';
                    that.startMove();//开始动画
                }
            };
            mouseEnter(that.o, 'mouseleave', function (e) {//给焦点图总容器添加mouseleave事件重启动画
                clearInterval(auto);
                that.autoMove();
            });
            this.oL.onclick = function () {//点击上一张按钮事件
                that.goPrev();
            };
            this.oR.onclick = function () {//点击下张按钮事件
                that.goNext();
            };
        },
        removeClassName: function () {//清除导航焦点样式的方法
            for (var i = 0; i < this.oTextLi.length; i++) {
                this.oTextLi[i].className = ""
            };
        }
    };
    var focusRun = new focus();//生成focus类实例
    focusRun.o = document.getElementById("focus");//给实例动态添加o属性，focus应该所有切换效果的图片容器
    function mouseEnter(ele, type, func) {
        if (window.document.all)//ie时间绑定
            ele.attachEvent('on' + type, func);
        else {//ff，chrome标准浏览器事件绑定，其实现在使用的所有浏览器已经支持mouseenter，mouseleave，直接绑定这2个事件就行，很老的版本付Firefox10，chrome10以下的不支持这2个事件，需要用mouseover，mouseout替代
            if (type === 'mouseenter')
                ele.addEventListener('mouseover', this.withoutChildFunction(func), false)
            else if (type === 'mouseleave')
                ele.addEventListener('mouseout', this.withoutChildFunction(func), false);
            else
                ele.addEventListener(type, func, false);
        };
    };
    function withoutChildFunction(func) {//这个是防止移动到子对象也会触发mouseover，mouseout事件用的，只有实际移动出容器而不是子对象上才会触发
        return function (e) {
            var parent = e.relatedTarget;
            while (parent != this && parent) {
                try {
                    parent = parent.parentNode;
                }
                catch (e) {
                    break;
                }
            }
            if (parent != this)
                func(e);
        };
    };
    window.onload = function () {//注册onload时间然后初始化效果
        focusRun.init();
    };