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），然后将子项附加到滑块

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>

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

EDITED ：我刚刚通过添加以下代码添加从滑块中删除最后一个图像：

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

在按钮上单击显示nex图像

1 个答案: