Member Avatar for nadiam

hey guys, so im trying to do the image slider with js but its not working. only the first pic: pic1, displays then it doesnt slide.

code:

<script type="text/javascript">
        <!-->
        var img1=new Image()
        img1.src="image/pic1.jpg"
        var img2=new Image()
        img2.src="image/pic2.jpg"
        var img3=new Image()
        img3.src="image/pic4.jpg"
        var img4=new Image()
        img4.src="image/pic5.jpg"
        var img5=new Image()
        img5.src="image/pic3.jpg"
        var img6=new Image()
        img6.src="image/pic6.jpg"
        var img7=new Image()
        img7.src="image/pic7.jpg"
        var img8=new Image()
        img8.src="image/pic8.jpg"
        var img9=new Image()
        img9.src="image/pic9.jpg"
        //-->
    </script>
    <div id="slideshow" align="left" style="margin-left: 30px;"><!--slideshow-->
        <img src="image/pic1.jpg" name="slide" width="450" height="200"/>
        <script type="text/javascript"><!--javascript for slideshow-->
        <!--
        var pic=1
        function slideit()
        {
            document.image.slide.src=eval("img"+pic+".src")
            if(pic<9)
            pic++
            else 
            pic=1
            setTimeout("slideit()",2000)
        }
        slideit()
        //-->
        <!--end javascript for slideshow-->
        </script>
    </div>

thanks in advance for any help!

  • 3 Contributors
  • 4 Replies
  • 243 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by nadiam
Member Avatar for JorgeM

Made some adjustments to your code...

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<script>

        var img1=new Image()
        img1.src="image/pic1.jpg"
        var img2=new Image()
        img2.src="image/pic2.jpg"
        var img3=new Image()
        img3.src="image/pic4.jpg"
        var img4=new Image()
        img4.src="image/pic5.jpg"
        var img5=new Image()
        img5.src="image/pic3.jpg"
        var img6=new Image()
        img6.src="image/pic6.jpg"
        var img7=new Image()
        img7.src="image/pic7.jpg"
        var img8=new Image()
        img8.src="image/pic8.jpg"
        var img9=new Image()
        img9.src="image/pic9.jpg"
        //-->
</script>
    <div id="slideshow" align="left" style="margin-left: 30px;"><!--slideshow-->
        <img src="image/pic1.jpg" id="slide" width="450" height="200"/>
        <script type="text/javascript"><!--javascript for slideshow-->
        <!--
        var pic=1
        function slideit()
        {
            //document.image.slide.src=eval("img"+pic+".src")
        document.getElementById("slide").src = "image/pic" + pic + ".jpg";
            if(pic<9) {
            pic++;
            } else { 
            pic=1;
        }
            setTimeout("slideit()",2000);
        }
        slideit()
        //-->
        <!--end javascript for slideshow-->
        </script>
    </div>

</body>
</html>
Edited by JorgeM
Member Avatar for JorgeM

Shorter version of your code...

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="slideshow" align="left" style="margin-left: 30px;">
  <img src="image/pic1.jpg" id="slide" width="450" height="200"/>
</div>

<script>
  var imgArray = new Array();
  for (var i = 1; i <= 9;i++) {
     imgArray[i] = new Image();
     imgArray[i].src == "image/pic" + i + ".jpg";
  }

  var pic=1
  function slideit() {
     document.getElementById("slide").src = "image/pic" + pic + ".jpg";
     if (pic < 9) {
        pic++;
     } else { 
        pic=1;
     }
     setTimeout("slideit()",2000);
   }
   slideit();
</script>

</body>
</html>
Member Avatar for nadiam

Thanks jorgeM!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.