模块——js功能(倒计时，幻灯)

var Global={};
Global.namespace = function (str) {
    var arr=str.split('.'),
        o=Global;
    for(var i= 0,len=arr.length;i<len;i++){
        o[arr[i]]=o[arr[i]] || {};
        o=o[arr[i]];
    }
};
/*
*   CountDown module
*   usage: new Global.Countdown() and use init() ,send params to init,like
*   {
*       day：10，
*       hour:10,
*       minute:10,
*       second:10
*   }
*   Author :wz
*   2015-12-20
*
* */
Global.namespace('Countdown');
(function(){
    Global.Countdown.end=0;
    var day=document.getElementById('day');
    var hour=document.getElementById('hour');
    var minute=document.getElementById('minute');
    var second=document.getElementById('second');
    Global.Countdown=function(obj){
        Global.Countdown.end=new Date().getTime()+(obj.day*24*60*60+obj.hour*60*60+obj.minute*60+obj.second)*1000;
    };

    Global.Countdown.prototype = {
        init:function(){
            var now=new Date().getTime();
            if(Global.Countdown.end-now > 0){
               setTimeout(Global.Countdown.prototype.init,1000);
               var obj= Global.Countdown.prototype.timeformat(Global.Countdown.end-now);
               day.innerHTML=obj.day;
               hour.innerHTML=obj.hour;
               minute.innerHTML=obj.minute;
               second.innerHTML=obj.second;
            }else{
                second.innerHTML='00';
                alert('time out')
            }
        },
        timeformat:function(t){
            var days = Math.floor(t/(1000*60*60*24));
            var hour=this.check(Math.floor((t%(1000*60*60*24))/(1000*60*60)));
            var minute=this.check(Math.floor((t%(1000*60*60))/(1000*60)));
            var second=this.check(Math.round((t%(1000*60))/1000));
            return {
                'day':days,
                'hour':hour,
                'minute':minute,
                'second':second
            }
        },
        check:function(str){
            if(str<10) return '0'+str;
            return str;
        }
    };
}());
new Global.Countdown({
    'day':0,
    'hour':0,
    'minute':0,
    'second':5
}).init();

　　

/*
*  common function
*/

Global.namespace('dom');
Global.dom.addEvent=function(obj,type,listener){
    if(obj.addEventListener){
        obj.addEventListener(type,listener,false)
    }else{
        obj.attachEvent('on'+type,listener);
    }
};
Global.dom.removeEvent=function(obj,type,listener){
    if(obj.removeEventListener){
        obj.removeEventListener(type,listener,false)
    }else{
        obj.detachEvent('on'+type,listener);
    }
};
Global.namespace('window');
Global.window.windowRect=function(){
    var winWidth= 0,winHeight=0;
    if(document.compatMode=='CSS1Compat'){
        winWidth=document.documentElement.clientWidth;
        winHeight=document.documentElement.clientHeight;
    }else{
        winWidth=document.body.clientWidth;
        winHeight=document.body.clientHeight;
    }
    return {
        winWidth:winWidth,
        winHeight:winHeight
    }
}




/*
 *   Dragdrop module
 *   usage: new Global.Dragdrop() and send a dom as params
 *   Author :wz
 *   2015-12-23
 *
 *
 */


Global.namespace('Dragdrop');
(function(){
    Global.Dragdrop=function (obj){
            obj.onmousedown = function(ev){
                var ev = ev||event;
                var disX = ev.clientX-this.offsetLeft;
                var disY = ev.clientY-this.offsetTop;
                if(obj.setCapture){
                    obj.setCapture();
                }
                document.onmousemove= function(ev){
                    var ev = ev||event;
                    var L =  ev.clientX - disX;
                    var T =  ev.clientY - disY;
                    if ( L < 0 ) {
                        L = 0;
                    } else if ( L > Global.window.windowRect().winWidth - obj.offsetWidth ) {
                        L = Global.window.windowRect().winWidth - obj.offsetWidth;
                    }

                    if ( T < 0 ) {
                        T = 0;
                    } else if ( T > Global.window.windowRect().winHeight - obj.offsetHeight ) {
                        T = Global.window.windowRect().winHeight - obj.offsetHeight;
                    }
                    obj.style.left =  L + 'px';
                    obj.style.top =  T + 'px';
                }
                document.onmouseup= function(){
                    document.onmousemove = document.onmouseup =null;
                    //release capture
                    if(obj.releaseCapture){
                        obj.releaseCapture();
                    }
                }
                return false;//prevent select word and pics
            }
        }
}());

　　

/*=================

Fade slider module
use new Global.Fade and send params like below

{
 box:$('.box'),             //container
 picli:$('.pic li'),        // pic li
 btnli:$('.btn li'),        //btn li
 prev:$('.prev'),           //prev btn
 next:$('.next'),           //next btn
 len:$('.btn li').size(),   //length of btns
 index:0,                   // init index default 0
 btnul:$('.btn'),           //btn ul
 auto:true,                 //default true
 time:1000                  //default auto time 3s
}
time:2015-12-26
author:wz

=================== */

html==============
<div class="box">
    <span class="prev"></span>
    <span class="next"></span>
    <ul class="pic">
        <li class="active"><img src="images/1.jpg" width="1000" height="377" alt=""/></li>
        <li><img src="images/2.jpg" width="1000" height="377" alt=""/></li>
        <li><img src="images/3.jpg" width="1000" height="377" alt=""/></li>
    </ul>
    <ul class="btn">
        <li class="active">0</li>
        <li>1</li>
        <li>2</li>
    </ul>
</div>




css==============

*{margin:0;padding:0;}
.box{1000px;height:377px;position:relative;margin:0 auto;}
.pic{position:absolute;left:0;top:0;z-index:1;}
.pic li{position:absolute;left:0;top:0;opacity:0;}
.pic .active{opacity:1;}
.btn{position:absolute;z-index:2;left:300px;bottom:10px;}
.btn li{float:left;text-indent:-9999px;20px;height:20px;border-radius:50%;background:#ccc;margin-left:20px;}
.btn .active{background:red;}
.prev{position:absolute;z-index:3;left:0;top:200px;30px;height:30px;background:red;text-indent:-9999px;}
.next{position:absolute;z-index:3;right:0;top:200px;30px;height:30px;background:red;text-indent:-99999px;}
li{list-style:none}

js=================


Global.Fade=function(options){
    var _self=this;
    var timer=null;
    this.box=options.box;
    this.picli=options.picli;
    this.btnul=options.btnul;
    this.btnli=options.btnli;
    this.len=options.len;
    this.index=options.index;
    this.prev=options.prev;
    this.next=options.next;
    this.auto=options.auto;
    this.time=options.time;
    this.next.on('click',function(){
        _self.nextmove();
    });
    this.prev.on('click',function(){
        _self.prevmove();
    });
    this.btnul.on('click', function (e) {
        if (e.target.nodeName.toLowerCase() !== 'li') return false;
        _self.index = e.target.innerHTML;
        _self.show(_self.index);
    });
    // auto slider
    timer= _self.auto ? setInterval(function(){
       _self.nextmove();
    },_self.time) :null;
    this.box.on('mouseover', function () {
        if(_self.auto) clearInterval(timer);
    }).on('mouseout',function(){
        timer=setInterval(function(){
            _self.nextmove();
        },3000)
    })
};



Global.Fade.prototype = {
    nextmove: function () {
        if (this.picli.is(':animated')) return false;
        this.index = (this.index >= this.len - 1) ? 0 : ++this.index;
        this.show(this.index);
    },
    prevmove:function(){
        if (this.picli.is(':animated')) return false;
        this.index=(this.index<=0) ? this.len-1:--this.index;
        this.show(this.index);
    },
    show: function () {
        var _self=this;
        this.picli.css('opacity', 0).eq(this.index).animate({
            'opacity': 1
        }, 300, function () {

        });
        _self.btnli.removeClass('active').eq(_self.index).addClass('active');
    }
};


var slider=new Global.Fade({
    box:$('.box'),
    picli:$('.pic li'),
    btnli:$('.btn li'),
    prev:$('.prev'),
    next:$('.next'),
    len:$('.btn li').size(),
    index:0,
    btnul:$('.btn'),
    auto:true,     //default true
    time:1000     //default auto time 3s
});