Z索引与物理位置和jQuery

在下面的标记中，“image 3”将是唯一可见的div，如果所有

.image

div都是绝对定位的，并且没有

z-index

。可以说，我可以通过调整所有元素的

z-index

来“洗牌”，也可以通过手动将最后一个

.image

div放在第一个之前，使序列“image 3，image 1，image 2”来洗牌

…图1。。。
…图2。。。
…图3。。。

假设我希望元素每隔几秒钟一个一个地消失。我想从显示“图像3”开始，让它在显示“图像1”后淡出。我可以通过给它一个比“图像1”更低的z索引，或者在完全淡出后手动将它移到“图像1”之前来实现这一点

z索引的问题。。。 我对使用z索引路由的保留是需要检查所有

.image

div，以便找到z索引最高的div，这样我就可以淡出它。如果我手动移动它们，这会容易得多，我可以只要求

$（“div.image:last”）

。此外，我必须重新写入z索引，将“image 3”设置为z索引：0；显示后，将所有其他项增加到i+1

手动移动元素的问题。。。 这看起来很草率，但正如前一段所指出的，这似乎是最简单的解决方案。我不确定它会对屏幕阅读器和其他需要实体标记才能正常工作的工具产生什么影响

---

这两种方法中哪一种最适合旋转木马类型的脚本，为什么？还是有第三种选择我没有考虑？

你能不能下载并使用几个jquery carousel插件中的一个？

我必须同意Steerpike

---

将它们全部设置为

display:none

然后您可以使用jQuery隐藏设置为

：可见的任何图像，并获取下一个图像并显示它…
以构建peirix和Steerpike建议的图像。将
display:none
添加到
image
类中，并将第一个div设置为
display:block
。然后，您可以使用
：visible
选择器找到可见div，并与下一个div交叉淡入淡出：

function rotate() {
    // fade out the current div
    var activeEl = $("#images div:visible");
    $(activeEl).fadeOut("slow");

    // fade in the next div in the loop
    if ($(activeEl).next().length) {
        $(activeEl).next().fadeIn("slow");
    } else {
        $($(activeEl).siblings()[0]).fadeIn("slow");
    }

    setTimeout(rotate, 1000);
}

$(document).ready(function() {
    rotate();
});

如果淡出一个图像，然后淡入下一个图像，则淡出同时发生。我在单击选项卡时执行了此操作，以查看结果

下面是我的精简代码，如果有帮助的话：

$("#casinoTabs li").click( function() {
    // get clicked tab
    var tab = $(this).attr("class");

    // make tab content active
    $("#casinoGames li").fadeOut("slow");
    $("#casinoGames li."+tab).fadeIn("slow");
}); 

注意：HTML有两个列表：一个用于选项卡（
#casinoTabs
），另一个用于选项卡内容（
#casinoGames
）。
我使用了一个z索引解决方案，我发现它基本上使用了3个级别的z索引：图像的最低值（例如80），活动图像的最高值（100）以及前一活动图像的中间值（90）

跟踪活动图像和上一个活动图像，应用适当的类并在jQuery中处理可见性，以一种简单而合乎逻辑的方式旋转图像

编辑：代码

js

var slide_show_speed = 1000;
var slide_duration = 5000;
var slide_interval;

$(document).ready(function() {
    var $first = $('#slideshow img:first');
    $first.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, slide_show_speed);
});

$(window).load(function() {
    slide_interval = setInterval( "slideSwitch()", slide_duration );
});

function slideSwitch() {
    var $active = $('#slideshow img.active');

    var $next =  $active.next().length ? $active.next() : $('#slideshow img:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, slide_show_speed, function() {
            $active.removeClass('active last-active');
    });
}

#slideshow {
    width: 400px;
    height: 300px;
    position: relative;
}
#slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 80;
    opacity: 0.0;
    border: none;
    /* ie bugs */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
    #slideshow img.active {
    z-index: 100;
    opacity: 1.0;
}
    #slideshow img.last-active {
    z-index: 90;
}

css

var slide_show_speed = 1000;
var slide_duration = 5000;
var slide_interval;

$(document).ready(function() {
    var $first = $('#slideshow img:first');
    $first.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, slide_show_speed);
});

$(window).load(function() {
    slide_interval = setInterval( "slideSwitch()", slide_duration );
});

function slideSwitch() {
    var $active = $('#slideshow img.active');

    var $next =  $active.next().length ? $active.next() : $('#slideshow img:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, slide_show_speed, function() {
            $active.removeClass('active last-active');
    });
}

#slideshow {
    width: 400px;
    height: 300px;
    position: relative;
}
#slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 80;
    opacity: 0.0;
    border: none;
    /* ie bugs */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
    #slideshow img.active {
    z-index: 100;
    opacity: 1.0;
}
    #slideshow img.last-active {
    z-index: 90;
}

为什么不简单地让两个类
。当前可见的
和
。下一个在第行中设置这两个类的z索引

.currently_visible, .next_in_line {
  display: block;
}

.currently_visible {
z-index: 100;
}
. next_in_line{
z-index: 1;
}

然后使用jQuery：

窃取克里斯的密码：

function rotate() {
    // fade out the current div
    var activeEl = $("#images div.currently_visible");
    $(activeEl).fadeOut("slow", function(activeEl) {
      $(activeEl).removeClass("currently_visible");
      if ($(activeEl).next().length) {
        var next_element = $(activeEl).next();
       } else {
         var next_element = $($(activeEl).siblings()[0]);
       }
      // Finds the new next_in_line element.
      if ($(activeEl).next().next().length) {
        var following_element = $(activeEl).next().next();
       } else {
         var following_element = $($(activeEl).siblings()[1]);
       }
        $(next_element).removeClass("next_in_line");
        $(next_element).addClass("currently_visible);
        $(following_element).addClass("next_in_line);
    });
    // change the class on the element below the current image.


    setTimeout(rotate, 1000);
}

$(document).ready(function() {
    rotate();
});

显示：无；在目前看不到的图像上？@Paddy:我可以，但这不是很“教育性”。：）对不起。就我个人而言，我认为，如果有人已经做了，并且提供了，就没有必要重新发明轮子。没意识到你想接受教育：）这就是我最终要做的。