欢迎来到 jackNEss'窝窝
I like simple mind

淡入式图片幻灯窗

2011年11月22日

淡入式图片幻灯窗

最近项目中需要用到的一个功能模块,嘛,虽然这种东西在网上一抓一大把,不过抱着自力更新的精神和有便于日后维护(毕竟看自己的代码,总比看别人的代码爽些,而且网上搜到的,不一定兼容性就好,我对自己这方面还是蛮有信心的说),so 还是稍微写一下吧。

工作原理

把需要轮播的图片全部通过绝对定位堆叠在一起,以 z-index 区分 堆叠顺序,然后通过改变 z-index 来实现图片轮播,缓动效果则通过 css 属性的 opacity(ie的通过调用 filter里面的透明滤镜解决)来实现。

思考

  • 如何优化在ie下的效果(filter滤镜 超耗内存)
  • 图片轮播时z-index交换问题
  • 用户恶意操作时候对应的解决方案

演示地址: http://www.jackness.org/lab/fade_slide/demo.html

源代码

/* fadeSlide() 淡入式图片轮播
 * fadeSlide(targetElement,option)
 * -targetElement:目标对象
 * -option:{
	leftBtn:左按钮对象
	rightBtn:右按钮对象
	instructBtns:指示性质按钮集合
	isAuto:是否自动轮播
	transition:动画过渡时间
	autoInterval:图片轮播间隔
	interval:每帧动画间隔
	effectType:触发方式
	btnsToggleClass:设置当事件触发时简易的按钮样式添加
  }
 * fadeSlide().setBeforeSlideEvent(func):设置事件触发前发生事件 其中this 指向触发该事件的当前按钮
 * fadeSlide().setAfterSlideEvent(func):设置事件触发后发生事件 其中this 指向触发该事件的当前按钮
 * fadeSlide().setOption(option):属性设置
 * fadeSlide().init():内容初始化
 * ------------------------------------------------------
 * example:
   完整版:
	fadeSlide("#slideArea",{
		leftBtn:"#slide_ltBtn",
		rightBtn:"#slide_rtBtn",
		instructBtns:"#slide_btnArea i",
		btnsToggleClass:"cur",
		isAuto:true,
		transition:500,
		autoInterval:3000,
		interval:20,
		effectType:"mouseover",
		btnsToggleClass:"cur"
	}).setBeforeSlideEvent(function(){
		//设置事件触发前发生事件
	}).setAfterSlideEvent(function(){
		//设置事件触发后发生事件
	}).init();
	
	简单版:
	fadeSlide("#slideArea",{leftBtn:"#slide_ltBtn",rightBtn:"#slide_rtBtn",instructBtns:"#slide_btnArea i",btnsToggleClass:"cur"}).init();
 * ------------------------------------------------------
 * power by jackNEss
 * date:2011-11-22
 * ver 1.0
 */

function fadeSlide(){
	
	//用户设置 start 
	var option = {
		//左按钮对象
		leftBtn:null,
		
		//右按钮对象
		rightBtn:null,
		
		//指示性质按钮集合
		instructBtns:null,
		
		//是否自动轮播
		isAuto:true,
		
		//动画过渡时间
		transition:500,
		
		//图片轮播间隔
		autoInterval:3000,
		
		//每帧动画间隔
		interval:20,
		
		//触发方式
		effectType:"mouseover",
		
		//设置当事件触发时简易的按钮样式添加
		btnsToggleClass:""
		
	}
	//用户设置  end 
	
	var _targetElement,_op;
	
	var _outset,_cells,_nowIndex;
	var _beforeEvent,_afterEvent;
	var _intervalKey,_transitionKey;
	
	arguments[0]? _targetElement = easy_switch(arguments[0]):"";
	arguments[1]? _op = arguments[1]:"";
	
	var dc = document;
	
	function addEvent(type,elm,func){
		if( elm.attachEvent ){
			elm.attachEvent("on" + type,func);
		}
		else if( elm.addEventListener){
			elm.addEventListener(type,func,false);
		}
	}
	
	//惯性运动
	function inertia_Motion(So,St,T){
		var S = Math.abs(St - So);
		var a = S/Math.pow(T/2,2);
		var Vt = a*T/4;
		
		
		return{
			Sn:function(Tn){
				var _Sn;
				Tn < T/2?(
					_Sn = So + a*Math.pow(Tn,2)/2 * ( parseInt( (St - So)/Math.abs(St - So) )||0 )
				):(
					Tn < T?(
						_Sn = So +  ( a*Math.pow(T/2,2)  - a*Math.pow(T - Tn,2)/2 )*( parseInt( (St - So)/Math.abs(St - So) )||0 )
					):(
						_Sn =  St
					)
				);
				
				return _Sn;
			},
			Vn:function(Tn){
				var _Vn;
				Tn < T/2?(
					_Vn = a*Tn/2
				):(
					Tn < T?(
						_Vn = Vt - a*(Tn - T/2)/2
					):(
						_Vn = 0
					)
				);
				return _Vn;
			}	
		}
	}
	
	function easy_switch(elm){
		if(typeof elm == "string"){
			var strs = elm.split(" ");
			var targetElements = [document.body];
			for(var i = 0; i < strs.length; i++){
				if(!targetElements){return false;}
				var flagGroups = new Array();
				
				for( var j = 0; j < targetElements.length; j++ ){
					
					var datasource = typeSwitcher(targetElements[j],strs[i]);
					if(!datasource){return false;}
					if(!datasource.length){
						if(datasource){
							flagGroups.push(datasource);
						}
					}
					else{
						
						for(var k = 0; k < datasource.length; k++){
							if(datasource[k]){
								flagGroups.push(datasource[k])
							}
						}	
					}
					
				}
				targetElements = flagGroups;
			}
			if(targetElements.length ==1){return targetElements[0]}
			else {return targetElements;}
		}
		else{
			return elm;	
		}
		function typeSwitcher(elm,str){
			
			if(str.substring(0,1) == "#"){
				return document.getElementById( str.substring(1,str.length) )	
			}
			else if(str.substring(0,1) == "."){
				var flag = elm.getElementsByTagName("*");
				var results = [];
				for(var i in flag){
					if(flag[i].className == str.substring(1,str.length)){
						results.push(flag[i]);	
					}	
				}
				return results;
			}
			else{
				var result = elm.getElementsByTagName(str)	
				if(result.length >0){
					return result;	
				}
				else{
					return false;	
				}
			}
		}
	}
	
	//区域初始化
	function areaReset(){
		_outset = dc.createElement("outset");
		_outset.style.cssText = "position:relative; z-index:1; display:block; width:100%; height:100%; overflow:hidden;";
		
		_cells = [];
		var targetChildren = _targetElement.children;
		var children_len = _targetElement.children.length;
		var fragElement = dc.createDocumentFragment();
		for( var i = 0; i < children_len; i++ ){
			_cells[i] = dc.createElement("cell");
			_cells[i].style.cssText = "position:absolute; top:0; left:0; z-index:" + (i ==0?2:1) + ";width:100%; height:100%;";
			_cells[i].appendChild(targetChildren[0]);
			fragElement.appendChild(_cells[i]);
			
		}
		_targetElement.appendChild(_outset);
		_outset.appendChild(fragElement);
		
		_nowIndex = 0;
		
		if(option.btnsToggleClass != "" && option.instructBtns){
			instructBtnToggle(0);
		}
		
		//事件绑定:instructBtns
		var instructBtns_len;
		if(option.instructBtns){
			if(typeof option.instructBtns.length =="underfined"){
				option.instructBtns = [option.instructBtns];
			}
			
			instructBtns_len = option.instructBtns.length;
			
			for( var i = 0; i < instructBtns_len; i++){
				(function(i){
					option.instructBtns[i]["on" + option.effectType] = function(){
						_beforeEvent?_beforeEvent.call(this):"";
						fadeEvent(i);
					}
				})(i);
			}
		}
		
		//事件绑定:leftBtn
		if(option.leftBtn){
			addEvent("click",option.leftBtn,function(){
				var _cells_len = _cells.length;
				var index = (_nowIndex - 1 >= 0? _nowIndex - 1: _cells_len - 1);
				fadeEvent(index);
			})
		}
		
		//事件绑定:rightBtn
		if(option.rightBtn){
			addEvent("click",option.rightBtn,function(){
				var _cells_len = _cells.length;
				var index = (_nowIndex + 1 >= _cells_len? 0 : _nowIndex + 1);
				fadeEvent(index);
			})
		}
		
		//事件绑定:循环
		if(option.isAuto){
			autoRunEvent();
		}
	}
	
	//instructBtns触发事件
	function instructBtnToggle(index){
		var instructBtns,instructBtns_len;
		instructBtns = option.instructBtns;
		instructBtns_len = option.instructBtns.length;
		for(var i = 0; i < instructBtns_len; i++){
			i == index ? instructBtns[i].className = option.btnsToggleClass : instructBtns[i].className ="";	
		}	
	}
	
	//淡入事件
	function fadeEvent(index){
		if(_nowIndex == index){return;}
		//instructBtns触发事件
		if(option.btnsToggleClass != "" && option.instructBtns){
			instructBtnToggle(index);
		}
		
		//事件初始化
		var _cells_len = _cells.length;
		var olderIndex = _nowIndex;
		_nowIndex = index;
		for( var i = 0; i < _cells_len; i++){
			if(i == olderIndex){
				_cells[i].style.zIndex = "2";
			}
			else if(i == _nowIndex){
				_cells[i].style.zIndex = "3";
			}
			else{
				_cells[i].style.zIndex = "1";
			}
			
		}
		
		var _cells_nowIndex = _cells[index];
		var _nowIndex_style = _cells_nowIndex.style;
		
		clearTimeout(_transitionKey);
		option.isAuto?clearTimeout(_intervalKey):"";
		
		_nowIndex_style.filter = "alpha(opacity=0)";
		_nowIndex_style.opacity = 0;
		
		var interval = option.interval,
			T = option.transition/interval,
			Tn = 0,
			So = 0,
			St = 100,
			Sn = 0;
		
		(function fade_Motion(){
			Tn < T?(
				Sn = inertia_Motion(So,St,T).Sn(Tn),
				_nowIndex_style.filter = "alpha(opacity=" + Sn + ")",
				_nowIndex_style.opacity = Math.round(Sn)/100,
				Tn++,
				_transitionKey = setTimeout(fade_Motion,interval)
			):(
				_nowIndex_style.filter = "alpha(opacity=" + St + ")",
				_nowIndex_style.opacity = Math.round(St)/100,
				_afterEvent?_afterEvent.call(_cells_nowIndex):"",
				option.isAuto? _intervalKey = setTimeout(autoRunEvent,option.autoInterval):""
			);
			
		})();
		
		
	}
	
	function autoRunEvent(){
		var _cells_len = _cells.length;
		var index = (_nowIndex + 1 >= _cells_len? 0 : _nowIndex + 1);
		fadeEvent(index);
	}
	
	return{
		//设置事件触发前发生事件
		setBeforeSlideEvent:function(func){
			_beforeEvent = func;
			return this;
		},
		
		//设置事件触发后发生事件
		setAfterSlideEvent:function(func){
			_afterEvent = func;
			return this;
		},
		
		//属性设置
		setOption:function(op){
			op.leftBtn? option.leftBtn = easy_switch(op.leftBtn):"";
			op.rightBtn? option.rightBtn = easy_switch(op.rightBtn):"";
			op.instructBtns? option.instructBtns = easy_switch(op.instructBtns):"";
			
			typeof op.isAuto == "boolean"? option.isAuto = op.isAuto:"";
			
			op.transition? option.transition = parseInt(op.transition):"";
			op.autoInterval? option.autoInterval = parseInt(op.autoInterval):"";
			op.interval? option.interval = parseInt(op.interval):"";
			
			op.effectType?option.effectType = op.effectType:"";
			op.btnsToggleClass?option.btnsToggleClass = op.btnsToggleClass:"";
			
			return this;
		},
		
		//函数执行
		init:function(){
			if(!_targetElement){return;}
			_op?this.setOption(_op):"";
			areaReset();
		}
	}
}
分类javascript
阅读 1,327
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS