Question

我有一系列图像，我希望将它们叠加在一起。其中每个按值按递减顺序排列position: absolute，top: 0，left:0和z-index。只有具有最高z-index值的图像应该是可见的，所有其他图像应该堆叠在它下面。

当然，容器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

在您的示例中，以下代码：

import itertools
itertools.permutations(['aa1','aa2','aa3','aa4','aa5'])

在HTML文档中创建以下标记：

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

但是你想要编辑这个元素的样式/ css，所以不要使用<img src="img_path_from_array" height="100%" width="97%" class="stock-images">，而应该使用.attr，如下所示：

.css

区分HTML元素的属性和HTML元素的样式属性（css）

Answer 2

不需要jQuery来做所有事情

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)
})

堆栈使用绝对定位和z-index动态添加图像

2 个答案: