Slideshow start delay

Discussion in 'JavaScript' started by jamie smith, Apr 6, 2005.

  1. #1
    Hi
    Iv adapted a slideshow script so that it appears twice on the same page. It works but I want to put a start delay on one of the slideshows to make the images change in sequance. Does anyboody know the bit of code I need to do it?
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    
    <script>
    // (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
    var slideShowSpeed2 = 3000
    // Duration of crossfade (seconds)
    var crossFadeDuration = 3
    
    // Specify the image files
    var Pic = new Array()
    var Pic2 = new Array()
    
    Pic[0] = 'pic/bcn1.jpg'
    Pic[1] = 'pic/bcn2.jpg'
    Pic[2] = 'pic/bcn3.jpg'
    Pic[3] = 'pic/bcn4.jpg'
    
    Pic2[0] = 'pic/bcn1.jpg'
    Pic2[1] = 'pic/bcn2.jpg'
    Pic2[2] = 'pic/bcn3.jpg'
    Pic2[3] = 'pic/bcn4.jpg'
    
    // =======================================
    // do not edit anything below this line
    // =======================================
    var k = 0
    var t
    var j = 0
    var p = Pic.length
    var p2 = Pic2.length
    
    var preLoad = new Array()
    for (i = 0; i < p; i++){
       preLoad[i] = new Image()
       preLoad[i].src = Pic[i]
    }
    
    var preLoad2 = new Array()
    for (i = 0; i < p2; i++){
       preLoad2[i] = new Image()
       preLoad2[i].src = Pic2[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)
    }
    function runSlideShow2(){
       if (document.all){
          document.images.SlideShow2.style.filter="blendTrans(duration=2)"
          document.images.SlideShow2.style.filter="blendTrans(duration=crossFadeDuration)"
          document.images.SlideShow2.filters.blendTrans.Apply()      
       }
       document.images.SlideShow2.src = preLoad2[k].src
       if (document.all){
          document.images.SlideShow2.filters.blendTrans.Play()
       }
       k = k + 1
       if (k > (p2-1)) k=0
       t = setTimeout('runSlideShow2()', slideShowSpeed2)
    }
    </script>  
    
    
    </head>
    
    <body onload="runSlideShow(); runSlideShow2()">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td id="VU" height=220 width=330>
    <img src="1.jpg" name='SlideShow' width=330 height=220></td>
    </tr>
    </table>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td id="VU" height=220 width=330>
    <img src="1.jpg" name='SlideShow2' width=330 height=220></td>
    </tr>
    </table>
    </body>
    </html>
    
    Code (markup):
    thankyou
     
    jamie smith, Apr 6, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Use setTimeout. For example, this code will show an alert after 3 seconds:

    <body onload="window.setTimeout('alert(0)', 3000)">
    </body>

    J.D.
     
    J.D., Apr 10, 2005 IP