Home > DeveloperSection > Blogs > Slide Show in JavaScript

Slide Show in JavaScript


JavaScript JavaScript 
Ratings:
0 Comment(s)
 1580  View(s)
Rate this:

Slide Show in JavaScript

Introduction:

In this blog I am going to explain how we can change the image on a button click.

Example:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Slide Show</title>

    <script type="text/javascript">

        var pics = new Array("Chrysanthemum.jpg", "Tulips.jpg", "ball.jpg");

        var picCount = 0;

        function PreviousImage() {

            if (document.animatePics && picCount == 0) {

                alert("You are on first slide");

            }

            else if (document.animatePics && picCount > 0) {

                picCount--;

                document.animatePics.src = pics[picCount];

            }

        }

        function NextImage() {

            if (document.animatePics && picCount == 2) {

                alert("You are on last slide");

            }

            if (document.animatePics && picCount < 2) {

                picCount++;

                document.animatePics.src = pics[picCount];

            }

        }

    </script>

</head>

<body>

    <p>

        <img name="animatePics" alt="" src="Chrysanthemum.jpg" style="height: 90px; width: 120px" />

        <input id="btnPrevious" type="button" value="Previous" onclick="PreviousImage()" />

        <input id="btnNext" type="button" value="Next" onclick="NextImage()" /></p>

</body>

</html>

Output:



When the previous button is pressed then if the image location is not at 0 position in the array then the counter is decremented and the image at just the previous location is shown . When the user presses the Next button then if the image is not last in the array location then the counter is incremented and the next image is shown.

Conclusion:

In this blog I explained about the concept of slideshow in JavaScript. How to change the image when the button is pressed.



Don't want to miss updates? Please click the below button!

Follow MindStick