1

私はプログラミングが初めてで、開発中の Web サイトでスライドショーに苦労しています。5 秒ごとに進むスライドショーを作成しましたが、ユーザーが手動でショーを進める (または戻す) ことができるようにしたいと考えています。

進むボタンを作成し、onclick 関数を使用しています。ショーを 1 枚進めるために onclick を機能させることができましたが、新しい画像が表示されると、次の画像が 5 秒後に自動的に表示されるまで onclick は機能しません。その後、onclickが再び機能するようです。これは継続的なサイクルです。

例: - 2 番目の画像が表示されます - 右の [進む] ボタンをクリックすると、3 番目の画像がすぐに表示されます - 3 番目の画像をクリックしても何も起こりません (5 秒後に自動的に 4 番目の画像に進みます) - 4 番目の画像が表示され、右の [進む] ボタンをクリックして、 5 番目の画像がすぐに表示されますが、新しい画像をクリックしても同じ問題が発生します。

これが私のコードです：

var myImage = document.getElementById("mainImage");
var navLeft = document.getElementById("navLeft");
var navRight = document.getElementById("navRight");

var imageArray = ["images/ss_img001.jpg","images/ss_img002.jpg","images/ss_img003.jpg","images/ss_img004.jpg",
                  "images/ss_img005.jpg","images/ss_img006.jpg","images/ss_img007.jpg","images/ss_img008.jpg"];
var imageIndex = 0;


navRight.onclick = function () {
    myImage.setAttribute("src",imageArray[imageIndex]);
    image++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
}

function changeImage() {
    myImage.setAttribute("src",imageArray[imageIndex]);
    imageIndex++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
}

setInterval(changeImage,5000);
4

1 に答える 1

1

この線

image++;

する必要があります

imageIndex++;

このようなさらなる問題を回避するには、onclick定義の代わりに次のことができます。

navRight.onclick = changeImage;
于 2013-10-27T05:42:14.700 に答える