Question

我对javascript很新。以下代码工作正常。当我点击“下一步”按钮时幻灯片停止它应该怎么做但是当点击显示上一张图像时它只显示一张图片并停止？我不知道有什么不对。请帮帮我

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

此javascript循环显示图像，但如果用户点击下一个或上一个按钮，则自动循环停止。

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];
};

这假定html如下：

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

Javascript幻灯片选择“下一步”图像混淆

1 个答案: