Advanced Search

Results 1 to 1 of 1

Thread: Background Image Slideshow with fade transition

  1. #1
    Join Date
    Apr 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Background Image Slideshow with fade transition

    1) Script Title: Background Image Slideshow with fade transition

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/bgslide.htm

    3) Describe problem:

    Hello,
    I'm using your script which is fantastic! but I would like it to know how to add the fade in & out transition with each image and I'm not sure how to insert the script to make this happen.

    Your help would greatly be appreciated.

    Boomer

    Below is the code:

    HTML Code:
    <html>
    <head>
    <title></title>
    <style>
    #bslide {
    /*Remove below line to make bgimage NOT fixed*/
    background-attachment:fixed;
    background-repeat: no-repeat;
    /*Use center center in place of 300 200 to center bg image*/
    background-position: center;
    }
    </style>
    
    <script language="JavaScript1.2">
    
    //Background Image Slideshow-  Dynamic Drive ([url]www.dynamicdrive.com[/url])
    //For full source code, 100's more DHTML scripts, and TOS,
    //visit [url]http://www.dynamicdrive.com[/url]
    
    //Specify background images to slide
    var bgslides=new Array()
    bgslides[0]="thumb2/photo1.jpg"
    bgslides[1]="thumb2/photo2.jpg"
    bgslides[2]="thumb2/photo3.jpg"
    
    //Specify interval between slide (in miliseconds)
    var speed=3000
    
    //preload images
    var processed=new Array()
    for (i=0;i<bgslides.length;i++){
    processed[i]=new Image()
    processed[i].src=bgslides[i]
    }
    
    var inc=-1
    
    function slideback(){
    if (inc<bgslides.length-1)
    inc++
    else
    inc=0
    document.getElementById? document.getElementById('bslide').background=processed[inc].src : document.all['bslide'].background=processed[inc].src
    }
    
    if (document.all||document.getElementById)
    window.onload=new Function('setInterval("slideback()",speed)')
    
    </script>
    </head>
    <body>
    <table id="bslide" height="225" width="140">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>
    
    </body>
    </html>
    Last edited by Snookerman; 04-24-2009 at 05:47 AM. Reason: added [html] tags

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •