Full version: jsB@nk » Image » Rotation » Image Rotation with new transition and dissolving effect
URL: https://www.javascriptbank.com/image-rotation-with-new-transition-and-dissolving-effect.html
This image rotation system creates a dissolving effect for the transition phase. Great for banners, picture-presentations and more. Add as many images as you like. Each image can be linked to a different URL. The full dissolving effect can be view with IE4, IE5 or higher. Netscape-users will see a simple image-rotation-effect instead of it.
Full version: jsB@nk » Image » Rotation » Image Rotation with new transition and dissolving effect
URL: https://www.javascriptbank.com/image-rotation-with-new-transition-and-dissolving-effect.html
<STYLE>.spanstyle {LEFT: 0px; POSITION: absolute; width: 100%; text-align: center;}</STYLE><SCRIPT><!-- Beginning of JavaScript -// CONFIGURATION:// 1. Copy the two script-blocks:// Paste the first script-block inside the head-section of your HTML-file.//Insert the second script-block into the body-section.// 2. Copy the style-block and paste it into the head-section of your HTML-file.// 3.Put your images into the same directory as the HTML-file.//You may add as many images as you like.// 4. Insert 'onLoad="checkbrowser()"' into the body-tag.// 5. Configure the variables below:// The width of your images (pixels)var imgwidth=800// The height of your images (pixels)var imgheight=250// The name of your images. You may add as many images as you like.var imgname=new Array()imgname[0]="logojs.gif"imgname[1]="photo1.jpg"imgname[2]="photo2.jpg"imgname[3]="photo3.jpg"// This block will preload your images. Do not edit this block.var imgpreload=new Array()for (i=0;i<=imgname.length-1;i++) {imgpreload[i]=new Image()imgpreload[i].src=imgname[i]}// Where should those images be linked to? // Add an URL for each image.// If you don't want to add an URL just write '#' instead of // the URL, see sample imgurl[2].var imgurl=new Array()imgurl[0]="http://javascriptbank.com"imgurl[1]="http://www.javascriptbank.com"imgurl[2]="http://javascriptbank.com"imgurl[3]="http://www.javascriptbank.com"// Final horizontal position of the image: distance to the left margin of the windowvar x_finalpos=30// Final vertical position of the image: distance to the top margin of the windowvar y_finalpos=30// Number of sliced cells (the higher this number the slower the visual effect)var x_slices=10// Number of sliced rows (the higher this number the slower the visual effect)var y_slices=8// Standstill between the images (microseconds)var pause=2500// Do not change the variables belowvar xy_slices=x_slices*y_slicesvar randomorder=new Array()for (i=0;i<=xy_slices-1;i++) {randomorder[i]=i}var speed=20var i_images=0var width_slice=Math.floor(imgwidth/x_slices)var height_slice=Math.floor(imgheight/y_slices)var cliptop=0var clipbottom=height_slicevar clipleft=0var clipright=width_slicevar spancounter=0var x_random=new Array()var y_random=new Array()var max_explsteps=15var i_explsteps=0function checkbrowser() {if (document.all) { initiate() } if (document.layers) { rotatenetscape() }}function initiate() { if (document.all) { spancounter=0 for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style")thisspan.posLeft=x_finalposthisspan.posTop=y_finalpos thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"clipleft+=width_slice clipright+=width_slice spancounter++} clipleft=0 clipright=width_slice cliptop+=height_slice clipbottom+=height_slice}for (i=0;i<=xy_slices-1;i++) {var thisspan=eval("span"+i)thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"}var timer=setTimeout("changeimage()",pause) }}function dissolveimg() {if (i_loop<=xy_slices-1) {var thisspan=eval("span"+randomorder[i_loop])thisspan.innerHTML="<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>"i_loop++var timer=setTimeout("dissolveimg()",speed)}else {clearTimeout(timer)var timer=setTimeout("changeimage()",pause)}}function changeimage() {getrandomorder(xy_slices)i_loop=0i_images++if (i_images>=imgname.length) {i_images=0} dissolveimg()}function getrandomorder(range) {for (i=0;i<=range;i++) {var firstvalue= Math.floor(range*Math.random())var secondvalue= Math.floor(range*Math.random())var cachevalue=randomorder[firstvalue]randomorder[firstvalue]=randomorder[secondvalue]randomorder[secondvalue]=cachevalue}}function rotatenetscape() {document.imgcontainer1.document.write("<a href='"+imgurl[i_images]+"'><img src='"+imgname[i_images]+"' border='0'></a>")document.imgcontainer1.document.close()i_images++if (i_images>imgname.length-1) {i_images=0} var timer=setTimeout("rotatenetscape()",pause)}// - End of JavaScript - --></SCRIPT><BODY onload=checkbrowser()><SCRIPT><!-- Beginning of JavaScript -if (document.all) {for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) { document.write("<div id='span"+spancounter+"' class='spanstyle'>") document.write("</div>")spancounter++}}}if (document.layers) {document.write("<div id='imgcontainer1' class='spanstyle'>")document.write("</div>")document.close()document.imgcontainer1.left=x_finalposdocument.imgcontainer1.top=y_finalpos}// - End of JavaScript - --></SCRIPT></BODY>