没事写着玩,呵呵,支持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("https://p-blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0001.jpg","https://p-blog.csdn.net/images/p_blog_csdn_net/lip009/EntryImages/20080726/0004.jpg","https://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 οnlοad="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>