在按鈕上點擊顯示一系列圖像

Question

是否可以在每個按鈕點擊時使用JavaScript中的數組一個接一個地顯示3個圖像？ 我有一個數組稱爲

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您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'>