標籤:

一款js淡出淡入式圖片切換效果

<html><head><title>一款js淡出淡入式圖片切換效果丨芯晴網頁特效丨CsrCode.Cn</title></head><body><script language="JavaScript1.2">

var slideshow_width_=320 //SET IMAGE WIDTHvar slideshow_height=240 //SET IMAGE HEIGHTvar pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()//SET IMAGE PATHS. Extend or contract array as neededfadeimages[0]="http://www.csrcode.cn/images/m01.jpg"fadeimages[1]="http://www.csrcode.cn/images/m02.jpg"fadeimages[2]="http://www.csrcode.cn/images/m03.jpg"

////NO need to edit beyond here/////////////

var preloadedimages=new Array()for (p=0;p<fadeimages.length;p++){preloadedimages[p]=new Image()preloadedimages[p].src=fadeimages[p]}

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)document.write("<div style="position:relative;width:"+slideshow_width+";height:"+slideshow_height+";overflow:hidden"><div id="canvas0" style="position:absolute;width:"+slideshow_width+";height:"+slideshow_height+";top:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:"+slideshow_width+";height:"+slideshow_height+";top:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>")elsedocument.write("<img name="defaultslide" src=""+fadeimages[0]+"" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>")

var curpos=10var degree=10var curcanvas="canvas0"var curimageindex=0var nextimageindex=1

function fadepic(){if (curpos<100){curpos+=10if (tempobj.filters)tempobj.filters.alpha.opacity=curposelse if (tempobj.style.MozOpacity)tempobj.style.MozOpacity=curpos/100}else{clearInterval(dropslide)nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)tempobj.innerHTML="<img src=""+fadeimages[nextimageindex]+"" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>"nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0setTimeout("rotateimage()",pause)}}

function rotateimage(){if (ie4||dom){resetit(curcanvas)var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)crossobj.style.zIndex++var temp="setInterval("fadepic()",50)"dropslide=eval(temp)curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"}elsedocument.images.defaultslide.src=fadeimages[curimageindex]curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0}

function resetit(what){curpos=10var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)if (crossobj.filters)crossobj.filters.alpha.opacity=curposelse if (crossobj.style.MozOpacity)crossobj.style.MozOpacity=curpos/100}

function startit(){var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)crossobj.innerHTML="<img src=""+fadeimages[curimageindex]+""/>"rotateimage()}

if (ie4||dom)window.onload=startitelsesetInterval("rotateimage()",pause)

</script></body></html>

<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴網頁特效</a>丨CsrCode.Cn 收集於互聯網,只為興趣與學習交流,不作商業用途。</font></p>

推薦閱讀:

令人神魂顛倒的圖片3〔組圖〕
世界十大名狗圖片和名字
超級搞笑圖片笑死人
LKImageKit開源圖片組件
如何選擇結婚的吉祥日 [圖片]

TAG:圖片 | 效果 |