兼容IE、火狐的javascript淡入淡出图片切换

　　前几天做项目的时候遇到一个这样的问题，使用ajaxpro后，我的jquery的淡入淡出图片切换效果不能用了，而其他的javascript的一些效果可以，因为使用ajaxpro后会对jquery的效果会有影响，而javascript可以正常使用，所以我自己写了一个javascript的淡入淡出效果。

　　废话不多说，下图我的淡入淡出图片切换的整体结构，非常简单。

虽然简单，但是很明了。

淡入淡出效果使用图片的透明度变化来实现的，而IE和火狐对透明度的设置不一样，所以要进行对象检测，当然也可以不用对象检测，见下面

//设置透明度
function setOpacity(obj,val){
	if(document.documentElement.filters){    //IE
		obj.style.filter = "alpha(opacity="+val+")";
	}
	else{
		obj.style.opacity = val/100;
	}
}

光靠透明度变化还不够，当然还要透明度随时间的变化而变化，下面是通过循环给对象添加淡入淡出的方法

　　　　　　banner.children[i].fadeIn = function(){
			var thisObj = this;
			var val=10;										
			var	t = setInterval(function(){
					if(val>=100){
						clearInterval(t);
					}
					setOpacity(thisObj,val);
					val+=10;
				},100);										
			return this;
		}
		//淡出
		banner.children[i].fadeOut = function(){
			var thisObj = this;
			var val=90;										
			var t = setInterval(function(){
				if(val<=0){
					clearInterval(t);
				}
				setOpacity(thisObj,val);
				val-=10;
			},100);
			return this;
		}

定义了上面这几个方法就可以轻松的使用淡入淡出效果了，当然还有一个初始化的方法和一个使用的方法

	//自动播放
	function autoPlay(){
		banner.children[currentIndex].fadeOut().next(currentIndex).fadeIn();
		if(currentIndex == totalIndex){
			currentIndex = 0;
		}
		else{
			currentIndex += 1;
		}
	}
	//初始化
	function init(){
		for(var i=totalIndex;i>=1;i--){
			if(document.documentElement.filters){
				banner.children[i].style.filter = "alpha(opacity=0)";
			}
			else{
				banner.children[i].style.opacity = 0;
			}
		}
	}

淡入淡出图片切换效果下载   (之前的有点问题，但是现在改过来了)

附件下载(请点击江西电信下载或广东电信下载)

转载于:https://www.cnblogs.com/nangua/archive/2011/08/27/2155540.html