Showing posts with label slideshow using java script. Show all posts
Showing posts with label slideshow using java script. Show all posts

Friday, March 29, 2013

creating Slide Show Using Java Script and CEWP

<script language="javascript" type="text/javascript">
<div 

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 3000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '/asrtech/images/smbox1.jpg'
Pic[1] = '/asrtech/images/smbox2.jpg'
Pic[2] = '/asrtech/images/smbox3.jpg'
Pic[3] = '/asrtech/images/smbox4.jpg'


// =======================================
// do not edit anything below this line
// =======================================

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
   document.images.SlideShow.click = "http://www.google.com"
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}

_spBodyOnLoadFunctionNames.push("runSlideShow");

</script>&#160;<!-- the Slide Show --><table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td width="300" height="300" id="VU"><img name="SlideShow" width="300" height="300" src="/Style%20Library/images/pic1.jpg" click="http://www.google.com" alt="" style="filter: blendtrans(duration=crossfadeduration)"/></td></tr></tbody></table>