Home » JS Resources Special Effects Script Details

Rotating Photos SlideShow with JavaScript

Description:


//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


Page Visited Visited: 0
Rate:


Add commentAdd comment (Comments: 0)  

Advertisement

Partners

Related Resources

Other Resources

arrow