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
});