»
EnglishFrenchVietnamese

Print - DHTML Fading Animation Image - JavaScriptBank.com

Full version: jsB@nk » Image » Rotation » DHTML Fading Animation Image
URL: https://www.javascriptbank.com/dhtml-fading-animation-image.html

DHTML Fading Animation Image © JavaScriptBank.comEnhancing image presentation on your website with this image rotator plus smooth dynamic motion (fade-in-fade-out). A very great animation effect if you bring to visitor pictures become more living! Page content loads much faster than any gif animation effect. Easy to setup and customize.

Full version: jsB@nk » Image » Rotation » DHTML Fading Animation Image
URL: https://www.javascriptbank.com/dhtml-fading-animation-image.html



JavaScript
<SCRIPT language=javaScript><!-- Beginning of JavaScript -sandra0 = new Image();sandra0.src = "photo1.jpg";sandra1 = new Image();sandra1.src = "photo2.jpg";sandra2 = new Image();sandra2.src = "photo3.jpg";var i_strngth=1var i_image=0var imageurl = new Array()imageurl[0] ="photo1.jpg"imageurl[1] ="photo2.jpg"imageurl[2] ="photo3.jpg"function showimage() {if(document.all) {if (i_strngth <=110) {testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";i_strngth=i_strngth+10var timer=setTimeout("showimage()",100)}else {clearTimeout(timer)var timer=setTimeout("hideimage()",1000)}}if(document.layers) {clearTimeout(timer)document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")document.close()i_image++if (i_image >= imageurl.length) {i_image=0}var timer=setTimeout("showimage()",2000)}}function hideimage() {if (i_strngth >=-10) {testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";i_strngth=i_strngth-10var timer=setTimeout("hideimage()",100)}else {clearTimeout(timer)i_image++if (i_image >= imageurl.length) {i_image=0}i_strngth=1var timer=setTimeout("showimage()",500)}}// - End of JavaScript - --></SCRIPT>


HTML
<BODY onload=showimage()><DIV id=mainbod style="POSITION: relative; VISIBILITY: visible"></DIV><DIV id=testimage style="POSITION: relative; VISIBILITY: visible"></DIV></BODY>