Javascript Simple Image SideShow

How To Create A Basic Image Slider Using Javascript

javascript image slider



In This Javascript Tutorial we will See How To Create A Simple Images Slider In JS Using Netbeans Editor .




Project Source Code:

<!DOCTYPE html>

<html>
    <head>
        <title>JavaScript Slider 1</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script>
            
            var images = [
                          "../images/img1.png",
                          "../images/img2.png",
                          "../images/img3.png",
                          "../images/img4.png"
                      ];
            var i = 0;
            function mySlider()
            {
               document.getElementById('slide').src = images[i];
               
               if(i < images.length - 1)
               {
                   i++;
               }else{
                   i = 0;
               }
               
               setTimeout("mySlider()",2500);
            }
            
            
        </script>

    </head>
    <body>

        <img id="slide" src="" alt="" width="400" height="200"  />

        <script>mySlider();</script>

    </body>
</html>




Share this

Related Posts

Previous
Next Post »