ボタンをクリックするとshow nex画像が表示されます

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