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> </td> </tr> </table> </body> </html>
CSS Codes
Reply With Quote
Bookmarks