兼容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;
}
}
}

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

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