1

私はjavascriptが初めてです。次のコードは正常に動作します。「次へ」ボタンをクリックするとスライドショーが停止しますが、クリックして前の画像を表示すると、画像が 1 つだけ表示されて停止しますか? 何が悪いのかわかりません。お願い助けて

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();
};
4

1 に答える 1

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;'/>
于 2012-04-28T04:44:13.660 に答える