Version compl�te: jsB@nk » Image » Rotation » Rotation d'image avec de nouveaux effets de transition et de dissolution
URL: https://www.javascriptbank.com/image-rotation-with-new-transition-and-dissolving-effect.html
Cet image "" rotation système crée un effet de la dissolution de la phase de transition. Idéal pour des bannières, des présentations d'images et plus encore. Ajouter autant d'images que vous le souhaitez. Chaque image peut être lié à une URL différente. Le plein effet de la dissolution peut être vue avec IE4, IE5 ou plus. Netscape, les utilisateurs verront une simple rotation de l'image-effet au lieu de celui-ci.
Version compl�te: jsB@nk » Image » Rotation » Rotation d'image avec de nouveaux effets de transition et de dissolution
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>