Rotating Photos SlideShow with JavaScriptDescription: //STEP 1 Paste the following into the HEAD of your page // Obviously add or delete images as needed -------------------------------------------------------------------------------------
// Specify the image files var Pic = new Array()
Pic[0] = 'Your first image.jpg' Pic[1] = 'Your second image.jpg' Pic[2] = 'Your third image.jpg' Pic[3] = 'Your forth image.jpg' Pic[4] = 'Your fifth image.jpg' Pic[5] = 'Your sixth image.jpg' Pic[6] = 'Your seventh image.jpg' Pic[7] = 'Your eighth image.jpg'
// Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000
// Duration of crossfade (seconds) var crossFadeDuration = 3
// No need to edit var t var j = 0 var p = Pic.length
var preLoad = new Array() for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] }
function runSlideShow(){
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 = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) }
</script>
<script language="JavaScript"> // <![CDATA[ function RE_OnLoadHandler() {
} // ]]> </script> //---------------------------------------------------------- //STEP 2 Make sure this is somewhere in your BODY tag <bodyonload="runSlideShow()" //----------------------------------------------------------
//Step 3 Put the Name on the image that you want to rotate: name="SlideShow" For example: <img src="images/Home/Main-02b.jpg" name="SlideShow" width="294" height="224"> //------------------------------------------------------------ //Step 4 Place the following at the botton of your page: <script language="JavaScript" type="text/javascript"> <!--// init(); //--> </script> Example is available at kismedia.com
Browsers Compatibility:
The Slide Show will run on almost all Browsers, however the Cross Fade effect between photos seems to only work on IE
|
Visit Download |
|
1 week |
2 week |
1 month |
5 months |
1 year |
2 year |
Overall |
Votes |
0 |
0 |
0 |
0 |
0 |
0 |
19 |
Rating |
0 |
0 |
0 |
0 |
0 |
0 |
3.8 |
Added: Fri Jan 05 2007 |
Last Modify: Mon Dec 18 2006 |
Added by: Martin Bishop |
Send Feedback to: Martin Bishop |
Visited: 0 |
|
|
|