画像を変更するためのJavaScript

img1、img2、img3、img4、.......、imgx という名前の画像セットがあります。最初に img2 に変更する画像を img3 で変更する画像をもう一度クリックして、 document.onload() NEXT ボタンをクリックするたびに次の画像と同じになります。このようにして、以前に表示した画像に戻るには PREVIOUS ボタンさえ必要です。

これを実装する方法は?

0
あなたはそれのためのコードを書いていますか?何かまだ試した?
追加された 著者 Dev,
画像のセットは固定ですか、動的ですか?
追加された 著者 Laurence Burke,

2 答え

var currentImage = 1;

window.onload = function() {
    showImage();
};

document.getElementById("next").onclick = function() {
    currentImage++;
    showImage();
}

function showImage() {
    document.getElementById("image").src = "img" + currentImage + ".jpg";
}

これらは基本的なもので、開始に役立つはずです。残りの部分を実施するのに手助けが必要な場合は、具体的に何をしたいのか、何を試したのかご相談ください。ヒント、 "次の"イメージが表示されないケースを処理する必要があります。あなたはそれが最初に戻って来たいのですか、あるいはうまくいきませんか?

4
追加された
@LaurenceBurke私は地獄が彼のためにすべてを作ることはないと確信しています。彼は自分自身を学び、試してみる必要があります。
追加された 著者 Alex Turpin,
ああ。失礼なレトルトについては申し訳ありません。
追加された 著者 Alex Turpin,
@ Xeon06 - これは十分なXeon06です。ありがとう!私は残りをコード化します。
追加された 著者 Mad coder.,
以前のクリックを追加して、その機能が画像の範囲外に出ないようにする必要があります
追加された 著者 Laurence Burke,
他に何が追加される必要があるかをOPに知らせるだけです。申し訳ありませんが、@タグを置く必要があります
追加された 著者 Laurence Burke,
<script type="text/javascript">

var images = new Array("img/image1.jpg", "img/image2.jpg", "img/image3.jpg"); 
var cur_image = 0;

function goNextImage() {
    var img = document.getElementById('image');
    cur_image++;
    if (cur_image == images.length) {
        cur_image = 0;
    }
    img.src = images[cur_image];
}

</script>


1
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript