ボタンをクリックすると一連の画像が表示されます

Question

JavaScriptで配列を使用してボタンをクリックするたびに3つの画像を1つずつ表示できますか？ は、私は、アレイは、私がロードするためにウェブサイトを必要とする方法が既に存在すべき最初の画像です

var images = ["image1.jpg","image2.jpg","image3.jpg"] 

呼ばれています。次にボタンをクリックすると、前にあった画像を置き換えて、次の画像を表示します。これを全部繰り返す必要があるので、ボタンをクリックすると表示されるイメージがimage3だった場合は、image1が表示されます。

私はこれまでのコードを共有したいと思いますが、どこから始めたらよいか分かりません。私が持っている唯一のコードは、レイアウトと変数です。

var images = ["image1.jpg","image2.jpg","image3.jpg"] 

Answer 1

this.Use 'document.querySelector' のようなお試し体でforEachを使用して、ボタンAppenに画像をクリックすると、あなたのbutton.Onを選択します。

var button = document.querySelector('#show');//selects your button 
 
    button.addEventListener('click',function(){ // handle click event 
 
    var images = ["image1.jpg","image2.jpg","image3.jpg"];//array of valid images 
 
    images.forEach(function(image){ 
 
    img = document.createElement('img');//creates a img element 
 
    img.src = image;//sets src of img tag 
 
    document.body.appendChild(img)//appends into body 
 
    }); 
 
    });

<button id="show"> 
 
    Show images 
 
    </button> 
 

 

 

Answer 2

ピュアJSソリューション。

var images = ["http://placehold.it/350x150", "http://placehold.it/250x150", "http://placehold.it/150x150"]; 
 

 
var elem = document.getElementById('img'); 
 
var i = 0; 
 

 
window.onload = function() { 
 
    elem.setAttribute("src", images[i]); 
 
} 
 

 
elem.addEventListener('click', function() { 
 
    (i < images.length-1) ? i++ : i = 0; 
 
    this.setAttribute("src", images[i]); 
 
});

<img src='' id='img'>

jQueryのソリューション。

var images = ["http://placehold.it/350x150", "http://placehold.it/250x150", "http://placehold.it/150x150"]; 
 
var i = 0; 
 

 
$(document).ready(function() { 
 
    $('#img').attr('src', images[i]); 
 
}); 
 

 
$('#img').click(function() { 
 
    (i < images.length-1) ? i++ : i = 0; 
 
    $('#img').attr('src', images[i]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src='' id='img'>