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

<html xmlns="">
    <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) {
                document.animatePics.src = pics[picCount];
        function NextImage() {
            if (document.animatePics && picCount == 2) {
                alert("You are on last slide");
            if (document.animatePics && picCount < 2) {
                document.animatePics.src = pics[picCount];
        <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>


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.


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