// Javscript /* slide show */ /* =========================================================== Script: JavaScript Cross-Browser SlideShow Script With Cross-Fade Effect between Images Adjustable Timing and Unlimited Images Function: Displays images continuously in a slideshow presentation format, with a fade effect on image transitions. Browsers: All common browsers: NS3-6, IE 4-6 Fade effect only in IE; others degrade gracefully Author: etLux =========================================================== Step 1. Put the following script in the head of your page: */ // (C) 2000 www.CodeLifter.com // http://www.codelifter.com // Free for all users, but leave in this header // NS4-6,IE4-6 // Fade effect only in IE; degrades gracefully // ======================================= // set the following variables // ======================================= // Set slideShowSpeed (milliseconds) var slideShowSpeed = 3000; // Duration of crossfade (seconds) var crossFadeDuration = 3; // ======================================= // do not edit anything below this line // ======================================= var t; var j = 0; var p = Pic.length; var playstop = 1; var preLoad = new Array(); for (i = 0; i < p; i++){ preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow(){ if(playstop){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply() ; } document.images.SlideShow.src = preLoad[j].src; if (document.all){ document.images.SlideShow.filters.blendTrans.Play(); } j++; if (j > (p-1)) j=0; } t = setTimeout('runSlideShow()', slideShowSpeed); } function stopSlideShow(){ playstop = 0; document.getElementById('manual').style.visibility = "visible"; } function startSlideShow(){ playstop = 1; document.getElementById('manual').style.visibility = "hidden"; } function nextSlide(){ stopSlideShow(); if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply() ; } j++; if (j > (p-1)) j=0; document.images.SlideShow.src = preLoad[j].src; if (document.all){ document.images.SlideShow.filters.blendTrans.Play(); } } function gotoSlide( slideIndex ){ stopSlideShow(); if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply() ; } document.images.SlideShow.src = preLoad[slideIndex].src; if (document.all){ document.images.SlideShow.filters.blendTrans.Play(); } } function prevSlide(){ stopSlideShow(); if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply() ; } j--; if (j < 0) j=(p-1); document.images.SlideShow.src = preLoad[j].src; if (document.all){ document.images.SlideShow.filters.blendTrans.Play(); } } /* =========================================================== Step 2. Put this onload event call in your body tag: =========================================================== Step 3. Put this in the body of your page where you want the slide show to appear. Set widths and heights same as images Set image file same as first image in array Pic[] (above)

*/