Question

在下面的标记中，如果所有.image div绝对定位且没有z-index，则“图像3”将是唯一可见的div。我可以通过调整所有元素的z-index来“重新洗牌”牌组，或者我可以通过手动将最后一个.image div放在第一个之前重新洗牌，使序列“图像3 ，图像1，图像2.“

<div id="images">
  <div class="image">...image 1...</div>
  <div class="image">...image 2...</div>
  <div class="image">...image 3...</div>
</div>

假设我希望元素每隔几秒钟就会淡化一个。我想首先展示“图像3”，并将其淡出，只显示在“图像1”显示之后。我可以通过给它一个比“图像1”更低的z-index，或者在“图像1”完全淡出之后手动移动它来实现这一点。

z-index的问题......

我使用z-index路由的保留是需要检查所有.image div只是为了找到具有最高z-index的div，所以我可以淡出它。如果我手动移动它会更容易，我只能要求$("div.image:last")。此外，我将不得不重写z索引，将“image 3”设置为z-index：0;显示之后，将所有其他值递增到i + 1.

手动移动元素的问题......

这似乎非常草率，但正如前一段所指出的那样，这似乎是最简单的解决方案。我不确定它会对屏幕阅读器和其他需要可靠标记才能正常运行的工具产生什么影响。

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

Answer 1

以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();
});

Answer 2

如果淡出一张图像然后淡入下一张图像，则淡入淡出同时发生。我在http://broburysports.com/casino上执行了此操作 - 点击标签查看结果。

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

$("#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）。

Answer 3

我必须同意Steerpike ......

将它们全部设置为display:none;然后您可以使用jQuery隐藏设置为:visible的图像，并获取下一个图像并显示它...

Answer 4

我使用z-index解决方案，我找到了一个基本上使用3个级别的z-index：图像的最低值（例如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');
    });
}

<强> CSS

#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;
}

Answer 5

为什么不简单地有两个类.currently_visible和.next_in_line并设置这两个类的z-index？

.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();
});

Answer 6

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

Z-Index与物理位置和jQuery

z-index的问题......

手动移动元素的问题......

6 个答案: