Simple Javascript Slideshow gone wrong

Discussion in 'Web Design and Development' started by jovialnazgul, Dec 31, 2008.

  1. jovialnazgul macrumors newbie

    Joined:
    Dec 31, 2008
    #1
    Hello I'm hoping someone here could help me, I've been looking everywhere for a simple explanation of how to get my Javascript slideshow
    a) working and
    b) embedded into a specific cell, probably using an iframe or something but i can figure that out later.

    I'm new to JS so if there is an obvious answer please let me know what to fix!
    Thanks so much for your help!

    Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

    <script type="text/javascript">
    <!--
    var image1=new Image()
    image1.src="images/slideshow/image1.jpg"
    var image2=new Image()
    image2.src="images/slideshow/image2.jpg"
    var image3=new Image()
    image3.src="images/slideshow/image3.jpg"
    var image4=new Image()
    image4.src="images/slideshow/image4.jpg"
    var image5=new Image()
    image5.src="images/slideshow/image5.jpg"
    var image6=new Image()
    image6.src="images/slideshow/image6.jpg"
    var image7=new Image()
    image7.src="images/slideshow/image7.jpg"
    var image8=new Image()
    image8.src="images/slideshow/image8.jpg"
    var image9=new Image()
    image9.src="images/slideshow/image9.jpg"
    var image10=new Image()
    image10.src="images/slideshow/image10.jpg"
    //-->
    </script>
    </head>

    <body>

    <img src="/images/slideshow/image1.jpg" name="slide" border=0 width="236" height="176"/>
    <script>
    <!-- var step=1
    var whichimage=1
    function slideit(){
    if (!document.images)
    return
    document.images.src=eval("image"+step+".src")
    whichimage=step

    if (step<10)
    step++
    else
    step=1

    setTimeout("slideit()",2500)
    }
    slideit()
    </script>
    </body>
    </html>


    All it does is display the 1st image. Simple solution, im sure, but if you see it I would appreciate the help very much!
    Thanks!
    Jovi
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I reworked your code a bit.
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Image Slide Show</title>
    <script type="text/javascript">
    //<![CDATA[
    var imgs = new Array (
      "images/slideshow/image1.jpg",
      "images/slideshow/image2.jpg",
      "images/slideshow/image3.jpg",
      "images/slideshow/image4.jpg",
      "images/slideshow/image5.jpg",
      "images/slideshow/image6.jpg",
      "images/slideshow/image7.jpg",
      "images/slideshow/image8.jpg",
      "images/slideshow/image9.jpg",
      "images/slideshow/image10.jpg"
    );
    // Preload images
    var len = imgs.length-1;
    do {
      var i = new Image();
      i.src = imgs[len--];
    } while (len > 0);
    len = imgs.length;
    //]]>
    </script>
    </head>
    <body>
    <img src="/images/slideshow/image1.jpg" id="slide" width="236" height="176"/>
    <script type="text/javascript">
    //<![CDATA[
    var step = 0;
    function slideit()
    {
      document.getElementById('slide').src = imgs[step++];
      if (step >= len) { step = 0; }
      setTimeout(function(){slideit();},2500);
    }
    slideit();
    //]]>
    </script>
    </body>
    </html>
     
  3. jovialnazgul thread starter macrumors newbie

    Joined:
    Dec 31, 2008

Share This Page