Question

<div id="show" class="slideshow">
     <img id="slide-0" src="picture1" alt="0" style='position:relative; z-index:0'/></a>
     <img id="slide-1" src="picture2" alt="1" style='position: absolute; right:20%; z-index:1'/>
</div>
<div class="slideshow-thumbnails">
     <a href="#slide-0"><img src="thumbnail1" alt="0" /></a></li>
     <a href="#slide-1"><img src="thumbnail2" alt="1" /></a></li>
</div>

以下是我想要做的事情：当选择thumbnail1时，picture1的z-index变为1，picture2的z-index变为0.然后，当{{按下1}}，thumbnail2的z-index变为0，picture1的z-index变为1.我怎样才能实现这个目标？

Answer 1

这应该有效：

<强> CSS

a#slide-0:active img#slide-0{z-index:1;}

<强> HTML

<a id="slide-0" href="javascript:;"><img src="thumbnail1" alt="0" /></a>

Answer 2

$('a').click(function(){
    if(this.attr('href') == '#slide-0')
    {
        $('#slide-0').css('z-index', '1');
        $('#slide-1').css('z-index', '0');
    }
    else(this.attr('href') == '#slide-1')
    {
        $('#slide-0').css('z-index', '0');
        $('#slide-1').css('z-index', '1');
    }
});

这对你有用。这使用jQuery。

Answer 3

使用jquery，尝试（选择缩略图0时）

$('#slide-0').css("zIndex", 1);
$('#slide-1').css("zIndex", 0);

，反之亦然，选择缩略图1。

在一般设置中（更多图像），

$('*[id^="slide-"]').css("zIndex", 0);
$('#'+$(this).attr("href").substr(1)).css("zIndex", 1);

绑定事件处理程序时，您甚至可以选择以下行代码：

$(".thumbnail").each ( function ( idx, e ) {
    $(e).click( function ( eve ) {
        $('.slide').css("zIndex", 0);
        $('#slide-'+idx).css("zIndex", 1);
    });
});

最后一个变体假定您向相应的html元素发出css类slide和thumbnail（或者设计一些其他精确匹配这些元素的选择器）。

当我调用每个单独的图像时，如何更改z-index？

3 个答案: