在按钮上点击显示一系列图像

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