on button click show nex image

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 цикл для перебора имен изображений, а затем создал элемент, добавлен атрибут пути изображения (ЦСИ), а затем добавляется ребенок к ползуну ,

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]);