您的位置：首页 > Web前端 > JavaScript

JavaScript控制多张图片循环播放（淡入淡出效果）

2008-07-26 00:41 671 查看
没事写着玩，呵呵，支持IE和FF。1.首先找一组图片，放到你的对应目录下。2.建立测试HTML页面，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 图片切换 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<mce:style><!--
.imgShow{
font-size: 12px;
background-color: #B0C6CE;
text-align: center;
vertical-align: middle;
display: table-caption;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
position:absolute;
width:400px;
height:300px;
}
.imgHide{
font-size: 12px;
background-color: #B0C6CE;
text-align: center;
vertical-align: middle;
display: table-caption;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
position:absolute;
filter:alpha(opacity=0);
opacity:0.00;
width:400px;
height:300px;
}
--></mce:style><style mce_bogus="1">.imgShow{
font-size: 12px;
background-color: #B0C6CE;
text-align: center;
vertical-align: middle;
display: table-caption;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
position:absolute;
width:400px;
height:300px;
}
.imgHide{
font-size: 12px;
background-color: #B0C6CE;
text-align: center;
vertical-align: middle;
display: table-caption;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
position:absolute;
filter:alpha(opacity=0);
opacity:0.00;
width:400px;
height:300px;
}</style>
<mce:script type="text/javascript"><!--
var hideTime=null;
var hide=100;//过滤镜初始值，IE
var hideFF=1.0;//过滤镜初始值，FF
var show=0;
var showFF=0.00;
var imgShow=1;
var imgSrcArray=new Array("http://p.blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0001.jpg","http://p.blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0004.jpg","http://p.blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0005.jpg");

function hideObject(hideImage,showImage){
try{
hide=hide-1;
hideFF=hideFF-0.01;
show=show+1;
showFF=showFF+0.01;
hideImage.style.filter="alpha(opacity="+hide+")";
hideImage.style.opacity=hideFF+"";/*FF兼容*/
//hideImage.style.-moz-opacity=hideFF+"";
showImage.style.filter="alpha(opacity="+show+")";
showImage.style.opacity=showFF+"";/*FF兼容*/
if(hide<=0){
showImage.style.filter="alpha(opacity=100)";
showImage.style.opacity=1.0;/*FF兼容*/
window.clearInterval(hideTime);
hideImage.style.display="none";
window.setTimeout(changeImage,1000);
}
}catch(e){
window.clearInterval(hideTime);
}
}
function changeImage(){
hide=100;
hideFF=1.0;
show=0;
showFF=0.0;
imgShow++;
if(imgShow>imgSrcArray.length){
imgShow=1;
}
var img1=document.getElementById("img1");
var img2=document.getElementById("img2");
var imageShow,imageHide;
if(img1.style.display=="none"){
img1.className="imgHide";
img2.className="imgShow";
img1.style.display="";
img1.src=imgSrcArray[imgShow-1];
imageShow=img1;
imageHide=img2;
}else{
img2.className="imgHide";
img1.className="imgShow";
img2.style.display="";
img2.src=imgSrcArray[imgShow-1];
imageShow=img2;
imageHide=img1;
}

hideTime=window.setInterval(function(){hideObject(imageHide,imageShow);},20);
}
// --></mce:script>
<BODY onload="window.setTimeout(changeImage,1000);">
<img id="img1" class="imgShow" src="image/1.jpg" mce_src="image/1.jpg"/>
<img id="img2" class="imgHide" src="image/2.jpg" mce_src="image/2.jpg"/>
</BODY>
</HTML>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航