Question

简单的概念，但我无法想出一个优雅的解决方案。

我在画廊中有一系列图像，里面的金额会发生变化。我写了一个简短的脚本，通过幻灯片放映，将可见图像淡出下面的下一个。从概念上讲它是完美的，但是超过2个图像它会变得很糟糕，因为“下一个”图像都在相同的z-index上。

是否有一个简单的脚本可以计算照片并为它们添加渐进式z-index？例如：图库中有10个图像，它为z指数分配-1到-10。

感谢您的帮助！

jsFiddle：http://jsfiddle.net/danielredwood/mmPZN/

HTML：

<img class="slide first" src="img/diamond-test.jpg" />
<img class="slide" src="img/diamond-test2.jpg" />
<img class="slide" src="img/diamond-test3.jpg" />

CSS：

.slide {
  top:100px;
  position:absolute;
  z-index:-1;
}
.first {
  display:block;
  position:static;
}

JavaScript的：

$('.slide').click(function(){
    var pic = $(this);
    pic.fadeOut(400, function(){
        pic.next().addClass('first');
        pic.insertAfter('.slide:last').removeClass('first').show();
    });    
});

Answer 1

您无需堆叠所有图像。你只需要一个容器和一个图像。第一张图片是背景，然后是一张图片。将图像淡入顶部，然后将其作为背景。隐藏图像，将SRC交换到下一个图像。淡入并重复。

该示例演示了该技术。你的工作会有所不同，因为你有多个图像。同样的想法。

请参阅：http://jsfiddle.net/Diodeus/gYyBL/

Answer 2

为什么不将可见性设置为隐藏在除您想要查看的所有内容之外的所有内容上？ z-index在某些浏览器中并不总能正常工作

Answer 3

找出一个可靠的修复，不需要按顺序对所有图像进行z索引。

见这里：http://jsfiddle.net/danielredwood/mmPZN/1/

JavaScript的：

$('.slide:first').addClass('first').next().addClass('second');
$('.slide').click(function(){
    var pic = $(this);
    pic.fadeOut(400, function(){
    pic.next().removeClass('second').addClass('first').next().addClass('second');
        pic.insertAfter('.slide:last').removeClass('first').show();
    });    
});

jQuery将z-index值添加到一系列图像中

3 个答案: