基于动画的滑动类封装

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