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.


  Modified On Sep-18-2014 01:24:06 PM

Leave Comment