Question

I’m very new to javascript. the following code works fine. when I click “next” button the slideshow stops how it should do but when clicking to show previous image it shows only one picture and stops? I can’t get what is wrong. help me please

window.onload = function () {

    newImg = new Array("images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg");

    var iImage = 1;

    var imgTimer = new Timer();
    imgTimer.Interval = 5000;
    imgTimer.Tick = function () {
        document.slideshow.src = newImg[iImage];
        iImage++
        if (iImage >= newImg.length) {
            iImage = 0;
        }

        document.getElementById('next').onclick = function () {
            if (iImage < newImg.length) {
                document.slideshow.src = newImg[iImage];
                iImage++
                if (iImage = newImg.length) {
                    iImage = 0;

                }
            }
            imgTimer.Stop();
        }
        document.getElementById('prev').onclick = function () {
            if (iImage > 0) {
                document.slideshow.src = newImg[iImage];
                iImage--
                if (iImage = 0) {
                    iImage = newImg.length;
                }
            }
            imgTimer.Stop();
        }


    };
    imgTimer.Start();
};

Answer 1

This javascript cycles through the images, but if the user clicks the next or prev buttons, the auto-cycling stops.

window.onload = function () {
    var newImg = ["images/image1.jpg",
                  "images/image2.jpg",
                  "images/image3.jpg",
                  "images/image4.jpg"],
        iImage = 0,
        slide = document.getElementById('slideshow'),
        next = document.getElementById('next'),
        prev = document.getElementById('prev'),
        interval = 3200,
        t = null;

    next.onclick = function () {
        iImage++;
        if (iImage >=  newImg.length) {
            iImage = 0;
        }
        slide.src = newImg[iImage];
        if (t !== null) {
            clearInterval(t);
            t = null;
        }
    };

    prev.onclick = function () {
        iImage--;
        if (iImage < 0) {
            iImage = newImg.length - 1;
        }
        slide.src = newImg[iImage];
        if (t !== null) {
            clearInterval(t);
            t = null;
        }
    };

    t = setInterval( function () {
        iImage++;
        if (iImage >= newImg.length) {
            iImage = 0;
        }
        slide.src = newImg[iImage];
    }, interval);

    slide.src = newImg[iImage];
};

This assumes html like this:

<input id='prev' value='prev' type='button'/> &nbsp;
<input id='next' value='next' type='button'/> <br/>
<img id='slideshow' src='' style='width:300px;'/>