js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）
本文实例介绍了js实现图片轮播相册，具有过渡渐变效果，分享给大家供大家参考，具体内容如下
思路很简单，用2个属性保存当前图片和上一张图片，用2个定时器分别控制透明度和当前过渡的图片。
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<style>
#cnt{width:100%;height:80%;}
.ctrl{text-align:center;border:1pxsolidgray;font-size:12px;cursor:pointer;}
</style>
<scriptdefer='defer'>
<!--
varcurOpac=0;
varfilterTimer;
varisIE=/internetexplorer/i.test(window.navigator.appName);
functionMyScroll(cnt,control){
this.data=[];//存放图片路径
this.interval=3000;//过渡一次的间隔时间(过渡时间+图片显示时间)
this.timer;//定时器：控制当前显示的图片
this.container=cnt;
this.curFrame=0;
this.oldFrame=0;
this.controls=control;//按钮集合
Global=this;//获取对象的指针
this.run=function(){
this.timer=window.setInterval("Global.showFrame()",this.interval);
}
//按钮的处理程序
this.go=function(i){
curOpac=0;//透明度归0
this.curFrame=i;//当前要过渡的图片
this.stop();//清空计时器
this.showFrame();//当前图片过渡
this.run();//循环播放
}
this.stop=function(){
window.clearInterval(this.timer);
window.clearInterval(filterTimer);
}
this.showFrame=function(){
//设置当前按钮样式
this.controls[this.oldFrame].style.backgroundColor="white";
this.controls[this.curFrame].style.backgroundColor="gray";
if(isIE)this.container.style.filter="alpha(opacity=0)";
elsethis.container.style.cssText="-moz-opacity:0";
this.container.innerHTML=this.data[this.curFrame];
filterTimer=window.setInterval("blend()",100);
this.oldFrame=this.curFrame;
this.curFrame++;
if(this.curFrame==this.data.length){
this.curFrame=0;
}
}
}
//增加透明度
functionblend(){
curOpac+=10;
if(isIE)Global.container.style.filter='alpha(opacity='+curOpac+')';
elseGlobal.container.style.cssText="-moz-opacity:"+curOpac/100.0;
if(curOpac==100){
curOpac=0;
window.clearInterval(filterTimer);
}
}
//开始
functionstartIt(){
varimgArr=[];
//创建4个图片对象保存图片路径
for(vari=0;i<4;i++){
imgArr[i]=newImage();
imgArr[i].src="images/banner"+(i+1)+".jpg";
}
varcontrolArr=$("mainTb").getElementsByTagName("span");
for(vari=0;i<controlArr.length;i++){
controlArr[i].tag=i;
controlArr[i].onclick=function(){
myScroll.go(this.tag);
}
}
varmyScroll=newMyScroll($("cnt"),controlArr);
myScroll.data.push("<imgsrc='"+imgArr[0].src+"'>");
myScroll.data.push("<imgsrc='"+imgArr[1].src+"'>");
myScroll.data.push("<imgsrc='"+imgArr[2].src+"'>");
myScroll.data.push("<imgsrc='"+imgArr[3].src+"'>");
myScroll.go(0);
}
window.onload=startIt;
function$(id){returndocument.getElementById(id);}
//-->
</script>
<BODY>
<tablewidth="300"height="100"id="mainTb">
<tr>
<throwspan="4"><divid="cnt"></div></td>
<tdwidth="15"><spanclass="ctrl">1</span></td>
</tr>
<tr>
<td><spanclass="ctrl">2</span></td>
</tr>
<tr>
<td><spanclass="ctrl">3</span></td>
</tr>
<tr>
<td><spanclass="ctrl">4</span></td>
</tr>
</table>
</BODY>
</HTML>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。