javascript - 在按钮上单击显示下一个图像

Question

我想在单击按钮时从本地文件夹中提取图像，为此我创建了一个包含图像名称的数组，并将其显示在 <div> 中。这是代码示例。

<div id="slider"></div>
<button class="btn"></button>

var img = document.createElement('IMG');
img.setAttribute('src', 'img/' + images + ".jpg");
var images = ['photo0', 'photo1', 'photo2'];//photo0.jpg,photo1.jpg,photo2.jpg are images in folder with path img/
var btn = document.querySelecotr('.btn'); //button element with onclick function
var slider = document.getElementById('slider'); //div element in which imgs will be displayed
var i = 0;
slider.appendChild(images[i]);
if (i < images.length)
    i++;
else{
    i=0;
}
slider.appendChild(images[i]);

Answer 1

这就是你所需要的，我引用了你的图像名称，并创建了一个 for 循环来遍历图像名称，然后创建元素，添加图像路径(src)的属性，然后附加子元素到 slider 。

function add_images_to_slider(){
  var images = ["photo0", "photo1", "photo2"];
  var slider = document.getElementById('slider');
  for(var i=0; i<images.length; i++) {
      var img = document.createElement('img');
       img.setAttribute('src', 'img/' + images[i] + ".jpg");
       slider.appendChild(img);
  }
}

<div id="slider"></div>
<button id="btn" onclick="add_images_to_slider();">click me</button>

如果您每次点击需要一张图像，解决方案如下:

function add_images_to_slider(){
  var images = ["photo0", "photo1", "photo2"];
  var slider = document.getElementById('slider');
  if (slider.getElementsByTagName('img')[0] !== undefined) slider.removeChild(slider.getElementsByTagName('img')[0]);
  if (typeof add_images_to_slider.st_i == 'undefined') add_images_to_slider.st_i=0;
  
  var img = document.createElement('img');
  img.setAttribute('src', 'img/' + images[add_images_to_slider.st_i] + ".jpg");
  slider.appendChild(img);
  
  if (add_images_to_slider.st_i < images.length-1) add_images_to_slider.st_i++;
  else add_images_to_slider.st_i = 0;
}

<div id="slider"></div>
<button id="btn" onclick="add_images_to_slider();">click me</button>

在第二个解决方案中，我在函数中创建了一个静态变量，该变量递增直到达到数组中的图像总数，然后自行重新启动。

已编辑:我刚刚通过添加以下代码附加了从 slider 中删除最后一个图像:

if (slider.getElementsByTagName('img')[0] !== undefined) slider.removeChild(slider.getElementsByTagName('img')[0]);