var imgs = [ 
    {max:'roll/factory1.jpg', min:'roll/factory1.jpg', url:'#', title:'', con:''}, 
    {max:'roll/factory2.jpg', min:'roll/factory2.jpg', url:'#', title:'', con:''}, 
    {max:'roll/factory3.jpg', min:'roll/factory3.jpg', url:'#', title:'', con:''}
]; 
function $A(iterable) { 
    var results = []; 
    for (var i = 0; i < iterable.length; i++)results.push(iterable[i]); 
    return results; 
} 
Function.prototype.bind = function() { 
    var __method = this, args = $A(arguments), object = args.shift(); 
    return function() { 
        return __method.apply(object, args.concat($A(arguments))); 
    } 
}
function focus(){this.initialize.apply(this,arguments)} 
focus.prototype = { 
    initialize: function(imgs, fc, tim, speed){ 
        this.imgs    = imgs; 
        this.tim    = tim*1000 || 2000; 
        this.speed    = speed || 0.3; 
        this.t        = null;        // 动作计时 
        this.tm        = null;        // 图片计时 
        this.tb        = null;        // 滑块儿计时 
        this.cur_i    = 0;        // 当前图片位置 
        this.move    = false;    // 是否在运动 
        this.tem    = 0;        // 临时数据 
        this.posTo    = 0;        // 滑块儿目的地 
        this.over    = 0; 
        var ds        = document.getElementById(fc).getElementsByTagName('div'); 
        var di        = ds[0]; 
        this.img_m    = document.createElement('img'); 
        this.img_m2 = this.img_m.cloneNode(true); 
        var dm        = ds[1]; 
        this.title    = ds[3]; 
        this.con    = ds[4]; 
        this.mask    = document.createElement('div'); 
        this.ul        = document.createElement('ul'); 
        this.lis    = []; 
        this.img_m.style.zIndex = 101; 
        this.img_m2.style.zIndex = 100; 
        di.appendChild(this.img_m); 
        di.appendChild(this.img_m2); 
        di = null; 
        dm.appendChild(this.mask); 
        dm.appendChild(this.ul); 
        dm = null; 
        this.img_cache(); 
        this.load(); 
    }, 
    img_cache: function(){ 
        var img = new Image(); 
        for(var i=0; i<this.imgs.length; i++)img.src = this.imgs[i].max; 
    }, 
    stop: function(){ 
        clearTimeout(this.t); 
        this.over = 1; 
    }, 
    start: function(){ 
        this.over = 0; 
        this.t = setTimeout(this.f_next.bind(this,null), this.tim); 
    }, 
    load: function(){ 
        var imgs             = this.imgs; 
        this.img_m.src         = imgs[0].max;   // 加载默认大图 
        this.title.innerHTML = '<a href="'+imgs[0].url+'">'+imgs[0].title+'</a>'; // 标题 
        this.con.innerHTML     = imgs[0].con;      //内容 
        var oThis          = this; 
        for(var i=0; i<imgs.length; i++){     //加载小图 
            var li              = document.createElement('li'); 
                li.onclick      = function(){ oThis.f_next.call(oThis,this.i); } 
                li.innerHTML  = '<img src="'+imgs[i].min+'" alt=""/>'; 
                li.i          = i; 
                this.lis.push(li); 
                this.ul.appendChild(li); 
        } 
        var lis = this.ul.childNodes; 
        for(var i=0; i<lis.length; i++){ 
            lis[i].onmouseover = function(){ this.style.border="1px solid #cc0000"; } 
            lis[i].onmouseout = function(){ this.style.border="1px solid #E4E4E4"; }  
        } 
        this.t = setTimeout(this.f_next.bind(this,null), this.tim); 
        this.title.parentNode.onmouseover = this.stop.bind(this); 
        this.title.parentNode.onmouseout = this.start.bind(this); 
    }, 
    f_next: function(n){ 
        if(this.tb) clearInterval(this.tb); 
        if(this.t) clearTimeout(this.t); 
        if(this.tm) clearInterval(this.tm); 
        if(n)this.cur_i = n-1; 
        var top = 0; 
        if(n!=0 && this.imgs[this.cur_i+1]){ 
            this.posTo = this.lis[this.cur_i+1].offsetTop; 
            this.cur_i = this.cur_i+1; 
        }else{ 
            this.posTo = this.lis[0].offsetTop; 
            this.cur_i = 0; 
        } 
        this.tem = this.mask.offsetTop; 
        this.tem > this.posTo? top = 1 : top = 0; 
        this.tb = setInterval(this.moveTo.bind(this, top), 25); 
    }, 
    moveTo: function(top){ 
        if(!top){ 
            if((this.tem+1.8)>=this.posTo+1){ 
                this.mask.style.top = this.posTo+'px'; 
                clearInterval(this.tb); 
                this.img_swap(); 
                return; 
            } 
            this.tem += (this.posTo-this.tem)*this.speed 
        }else{ 
            if((this.tem-1.8)<=this.posTo-1){ 
                this.mask.style.top = this.posTo+'px'; 
                clearInterval(this.tb); 
                this.img_swap(); 
                return; 
            } 
            this.tem -= (this.tem-this.posTo)*this.speed; 
        } 
        this.mask.style.top = this.tem+'px'; 
    }, 
    img_swap: function(){ 
        var t, b; 
        if(this.img_m.style.zIndex>this.img_m2.style.zIndex){ 
            t = this.img_m; 
            b = this.img_m2; 
        }else{ 
            t = this.img_m2; 
            b = this.img_m; 
        } 
        this.title.innerHTML = '<a href="'+this.imgs[this.cur_i].url+'">'+this.imgs[this.cur_i].title+'</a>'; 
        this.con.innerHTML     = this.imgs[this.cur_i].con; 
        b.src                 = this.imgs[this.cur_i].max; 
        /MSIE/.test(navigator.userAgent) ? this.tem = t.style.filter ? t.style.filter.replace(/^.+=(\d+).+$/,'$1') : 100 : this.tem = t.style.opacity ? t.style.opacity*100 : 100; 
        this.tm                 = setInterval(this.img_hid.bind(this, t, b), 25); 
    }, 
    img_hid: function(t,b){ 
        this.tem -= 5; 
        if(/MSIE/.test(navigator.userAgent)) 
            t.style.filter = 'alpha(opacity='+this.tem+')'; 
        else 
            t.style.opacity = this.tem/100; 
        if(this.tem <=0){ 
            clearInterval(this.tm); 
            var tz           = t.style.zIndex; 
            var bz           = b.style.zIndex; 
            t.style.zIndex = bz 
            b.style.zIndex = tz; 
            if(/MSIE/.test(navigator.userAgent)) 
                t.style.filter = 'alpha(opacity=100)'; 
            else 
                t.style.opacity = 1; 
            if(this.over) return; 
            this.t = setTimeout(this.f_next.bind(this, null), this.tim); // 继续循环 
        } 
    } 
} 
window.onload = function(){ 
    new focus(imgs,'focus_m'); 
}