/* @ 滑动类
===================================*/
/*
* @ 调用方式
new Slide({
stage: M.$("#JS_slide_stage"),
indexDom: M.$("#JS_slide_nav"),
indexList: M.$(".a", "#JS_slide_nav"),
prevBtn: M.$("#JS_slide_prev"),
nextBtn: M.$("#JS_slide_next"),
step: 171,
delay: 2000
});
*/
function Slide( setting ){
if( !setting.stage )return;
if( setting.indexList.length <= 0 )return;
this.stage = setting.stage;
this.imgs = M.$(".img", this.stage);
if( setting.indexDom )this.indexDom = setting.indexDom;
this.indexList = setting.indexList;
if( setting.prevBtn )this.prevBtn = setting.prevBtn;
if( setting.nextBtn )this.nextBtn = setting.nextBtn;
this.step = setting.step;
this.delay = setting.delay;
this.isWideScreen = setting.isWideScreen;
this.count = this.indexList.length || 0;
this.lock = false;
for( var i=0;i<this.count;i++ ){
this.indexList[i].key = i;
}
this.current = this.indexList[0];
this.start();
var _this = this;
if( setting.prevBtn && setting.nextBtn ){
this.prevBtn.onclick = function( event ){ _this.prev( event ) };
this.nextBtn.onclick = function( event ){ _this.next( event ) };
}
this.stage.onmouseover = this.stage.onmousemove = function(){ _this.lock = true; }
this.stage.onmouseout = function(){
_this.lock = false;
_this.start();
}
if( setting.indexDom ){
this.indexDom.onmouseover = this.indexDom.onclick = function( event ){ _this.indexToMove( event ); }
}
}
Slide.prototype = {
start : function(){
var _this = this,
now = new Date();
_this.stage.timeStamp = now.valueOf();
window.setTimeout( function(){
_this.move( null, now.valueOf() );
}, _this.delay );
},
move : function( index, timeStamp ){
var _this = this;
if( timeStamp && ( _this.lock || timeStamp != _this.stage.timeStamp ) )return;
if( typeof( index ) != 'number' ){
index = _this.current.key - (-1);
if( index >= _this.count || index < 0 ){
index = 0;
}
}
M.removeClass( _this.current, "current" );
_this.current = _this.indexList[ index ];
_this.isWideScreen ? _this.lazyBg(index) : _this.lazyImg( index ); //图片缓加载
M.Animate( _this.stage, {'marginLeft': _this.step * (0-index) + 'px'}, 200 );
M.addClass( _this.current, "current" );
if( _this.lock )return;
_this.start();
},
prev : function( e ){
var _this = this;
e = e || window.event;
var target = e.target || e.srcElement;
var index = _this.current.key;
index--;
if( index >= _this.count || index < 0 ){
index = _this.count - 1;
}
target.blur();
_this.move( index );
return false;
},
next : function( e ){
var _this = this;
e = e || window.event;
var target = e.target || e.srcElement;
var index = _this.current.key;
index++;
if( index >= _this.count || index < 0 ){
index = 0;
}
target.blur();
_this.move( index );
return false;
},
lazyImg : function( index ){
var _this = this,
img = _this.imgs[index];
if( img && img.getAttribute("lazy-src") ){
img.src = img.getAttribute("lazy-src");
img.removeAttribute("lazy-src");
}
},
lazyBg: function( index ){
var _this = this,
img = _this.imgs[index];
if( img && img.getAttribute("lazy-src") ){
img.style.cssText = 'background:url(' + img.getAttribute( "lazy-src" ) + ') center center no-repeat';
img.removeAttribute( "dlazy-src" );
}
},
indexToMove : function( e ){
var _this = this;
e = e || window.event;
var target = e.target || e.srcElement;
while( target && target != _this.indexDom ){
if( target.tagName.toLowerCase() == "a" ){
target.blur();
_this.move( target.key );
}
target = target.parentNode;
}
}
}
/*----- 顶部全屏广告 -----*/
window._currentWidth = document.body.clientWidth;
var topSlide = new Slide({
stage: M.$("#JS_slide_stage"),
indexDom: M.$("#JS_slide_nav"),
indexList: M.$("a", "#JS_slide_nav"),
prevBtn: M.$("#JS_slide_prev"),
nextBtn: M.$("#JS_slide_next"),
step: window._currentWidth,
delay: 5000,
isWideScreen: true
});
版权所有:www.meilele.com