1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

JavaScript Image Rotation with new transition and dissolving effect

Discussion in 'Web Development' started by JavaScriptBank, May 7, 2010.

  1. This image rotation system creates a dissolving effect for the transition phase. Great for banners, picture-presentations and... detail at javascriptbank.com/
    [​IMG]
    Demo:
    javascriptbank.com/image-rotation-with-new-transition-and-dissolving-effect.html/en/
    How to setup

    Step 1: CSS below for styling thescript, place it into HEAD section
    CSS
    Code:
    <STYLE>
    .spanstyle {
        LEFT: 0px; POSITION: absolute; width: 100%; text-align: center;
    }
    </STYLE>
    Step 2: Place JavaScript below in your HEAD section
    JavaScript
    Code:
    <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 window
    var x_finalpos=30
    
    // Final vertical position of the image: distance to the top margin of the window
    var 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 below
    var xy_slices=x_slices*y_slices
    var randomorder=new Array()
    for (i=0;i<=xy_slices-1;i++) {
        randomorder[i]=i
    }
    
    var speed=20
    var i_images=0
    var width_slice=Math.floor(imgwidth/x_slices)
    var height_slice=Math.floor(imgheight/y_slices)
    
    var cliptop=0
    var clipbottom=height_slice
    var clipleft=0
    var clipright=width_slice
    var spancounter=0
    var x_random=new Array()
    var y_random=new Array()
    var max_explsteps=15
    var i_explsteps=0
    
    function 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_finalpos
                    thisspan.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=0
        i_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>
    Step 3: Place HTML below in your BODY section
    HTML
    Code:
    <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_finalpos
        document.imgcontainer1.top=y_finalpos    
    }
    // - End of JavaScript - -->
    </SCRIPT>
    </BODY>

    JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider​
     
  2. billy10388

    billy10388 New Member

    Thank you so much for your post.
    _________________