絶対配置とZ-インデックスを使用して動的に画像を積み重ねる

Question

私は画像の配列を持っていて、それらを重ねて重ねていきたいと思います。それぞれの値は、値が小さい順にposition: absolute,top: 0,left:0、z-indexとなります。 z値が最も高い画像のみが表示され、他のすべての画像はその下に重ねて表示されます。もちろん

、コンテナのdiv（<div id="slide-container">は）position: relative

唯一の問題は、私は希望の動作が届かない理由であるかもしれない、動的にこれらの画像を追加してい、である必要があります。

HTML

<div id="slide-container"> 

    <div class="icon-container"> 
     <i class="fa fa-arrow-left" aria-hidden="true"></i> 
    </div> 

    <div class="icon-container"> 
     <i class="fa fa-arrow-right" aria-hidden="true"></i> 
    </div> 

    <!-- Here I will be adding the images --> 
</div> 

JS

var slides = [ 
    { 
     img: 'images/one.jpg', 
     text: 'First Image' 
    }, 
    { 
     img: 'images/two.jpg', 
     text: 'Second Image' 
    }, 
    { 
     img: 'images/Three.jpg', 
     text: 'Second Image' 
    } 
]; 

var z = slides.length; 

for(var index = 0; index < slides.length; index++,z--){ 

    var img = $('<img>'); 
    img.attr('src', slides[index].img); 
    img.attr('height','100%'); 
    img.attr('width','97%'); 
    img.attr('class','stock-images'); 

    // the following properties doesn't seem to have any effect. 
    img.attr('position','absolute'); 
    img.attr('left','0'); 
    img.attr('top','0'); 
    img.attr('z-index',z); 

    $('#slide-container').append(img); 

} 

CSS

#slide-container{ 
    /*border: 1px solid lightgrey;*/ 
    height: 32em; 
    width: 70%; 
    margin-top: 1em; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; /*not required if image takes 100% width of container*/ 

    position: relative; /*kept it relative positioned*/ 
} 

.icon-container:nth-child(1){ 
    /*left arrow icon*/ 
    position: absolute; 
    left: -4em; 
    top: 45%; 
    color: #DFE0E3; 
} 

.icon-container:nth-child(2){ 
    /*right arrow icon*/ 
    position: absolute; 
    right: -4em; 
    top: 45%; 
    color: #DFE0E3; 
} 

私は、予想される動作が届きませんむしろすべての画像が上下に表示されます。私は間違って何をしていますか？

ありがとうございます！あなたの例では

Answer 1

次のコード：

var img = $('<img>'); 
    img.attr('src', slides[index].img); 
    img.attr('height','100%'); 
    img.attr('width','97%'); 
    img.attr('class','stock-images'); 

は、HTML文書に次のタグを作成：

<img src="img_path_from_array" height="100%" width="97%" class="stock-images"> 

をしかし、あなたはその代わりに、この要素のスタイル/ CSSを編集します次のように.cssを使用する必要があり.attr使用：

img.attr('src', slides[index].img); 
img.css('height','100%'); 
img.css('width','97%'); 

HTML要素の属性の区別、およびHTML要素のスタイル属性（CSS）

Answer 2

slides.forEach(function(slide, i) { 
    var img = new Image 
    img.src = slide.img 
    img.className = 'stock-images' 

    Object.assign(img.style, { 
     height: '100%', 
     width: '100%', 
     position: 'absolute', 
     left: '0', 
     top: '0', 
     zIndex: i 
    }) 

    $('#slide-container').append(img) 
})