基于动画的滑动类封装

/* @ 滑动类
===================================*/
/*
 * @ 调用方式
	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