Question

是否可以在JavaScript中使用数组单击每个按钮一个接一个地显示3个图像？我有一个名为

的数组

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

我需要加载网站的方式是第一张图片已经存在。然后，当我点击按钮时，我希望显示下一张图片，然后替换之前的图像。我想要在整个过程中重复这一点，所以当我点击按钮时，如果显示的图像是image3，那么应该显示image1。

我想分享我到目前为止的代码，但我不知道从哪里开始。我唯一的代码是布局和变量。

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

Answer 1

试试这样。使用'document.querySelector'选择你的按钮。点击按钮，在身体中使用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>

{{1}}

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

按钮单击显示一系列图像

2 个答案: