Javascript 如何在简单的jQuery幻灯片放映中隐藏上一张幻灯片？

我正在为我的女朋友创建一个在线公文包，并为此制作一个带有淡入淡出过渡的简单图像幻灯片。当显示新的“活动”幻灯片时，我希望能够“隐藏”上一张“上次活动”幻灯片

我修改了这里提供的幻灯片（），因此它不是自动循环，而是由“prev/next”按钮控制。这一切都很好。 与上面的例子相反，我需要在幻灯片中有不同大小的图像

问题：幻灯片的工作方式，就像一堆图像一样，我看到的是当前“活动”图像后面的前一个图像。例如，在垂直（纵向）图像和水平（横向）图像之间切换时，我可以看到纵向图像后面的横向图像

我在$nextSlide（）函数中尝试了jQuery.hide（）方法，但不确定这样做是否正确。我是一个完整的javascript和jQuery新手

HTML:

上/下

CSS:

#幻灯片放映{
位置：相对位置；
高度：400px；
}
#幻灯片放映部{
位置：绝对位置；
排名：0；
左：0；
z指数：8；
不透明度：0.0；
高度：400px；
背景色：白色；
}
#幻灯片放映分区激活{
z指数：10；
不透明度：1.0；
}
#幻灯片放映DIV.last-active{
z指数：9；
}
#幻灯片放映部{
高度：350px；
显示：块；
边界：0；
边缘底部：10px；
}

JavaScript:

function nextSlide() {
    var $active = $('#slideshow DIV.active'); 
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last'); 


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


    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 300, function() {
            $active.removeClass('active last-active');
        });
}
$(".control-next").click(function(){
    nextSlide();
    });

´´´

The goal is to have a slideshow that doesn't show the images like a stack. I bet the solution is very simple, but I can't work it out.

---

从分区中删除活动类和最后一个活动类后。。。将其不透明度重置回0.0，以便下次再次设置动画（淡入）：

如果你也希望它淡出，而不仅仅是去不透明度0。。。使用以下命令：

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

---

从分区中删除活动类和最后一个活动类后。。。将其不透明度重置回0.0，以便下次再次设置动画（淡入）：

如果你也希望它淡出，而不仅仅是去不透明度0。。。使用以下命令：

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

---

首先，非常感谢您快速回答我的问题。我只是试着对上面的内容进行调整，它实际上将幻灯片隐藏在当前幻灯片的后面，这正是我想要的。有一件事，脚本似乎是逐行执行的，从上到下。这意味着在淡入淡出动画完成后，最后一张活动幻灯片将首先隐藏。但这也意味着，当我删除淡入淡出动画时，幻灯片会立即隐藏！我绝对走在正确的道路上-现在我只需要找到一种方法来保持淡出动画。基本上你是在寻找淡出。我已经更新了代码。谢谢！我还考虑了添加淡出，但问题仍然是新幻灯片的淡入动画必须在执行下一行代码之前完成播放。这意味着，当我单击“下一步”时，在播放淡入动画时，上一张幻灯片将在0.3秒内显示在新幻灯片的后面，然后，上一张幻灯片将淡出或立即隐藏。我想诀窍是要么同时执行，要么用白色填充图像周围的空间，这样图像后面的图像就看不见了。我感谢你的帮助！顺序就在代码里。您可以先淡出当前幻灯片，然后淡入下一张幻灯片。这一切都是按照您在代码中指定的顺序进行的。首先，非常感谢您快速回答我的问题。我只是试着对上面的内容进行调整，它实际上将幻灯片隐藏在当前幻灯片的后面，这正是我想要的。有一件事，脚本似乎是逐行执行的，从上到下。这意味着在淡入淡出动画完成后，最后一张活动幻灯片将首先隐藏。但这也意味着，当我删除淡入淡出动画时，幻灯片会立即隐藏！我绝对走在正确的道路上-现在我只需要找到一种方法来保持淡出动画。基本上你是在寻找淡出。我已经更新了代码。谢谢！我还考虑了添加淡出，但问题仍然是新幻灯片的淡入动画必须在执行下一行代码之前完成播放。这意味着，当我单击“下一步”时，在播放淡入动画时，上一张幻灯片将在0.3秒内显示在新幻灯片的后面，然后，上一张幻灯片将淡出或立即隐藏。我想诀窍是要么同时执行，要么用白色填充图像周围的空间，这样图像后面的图像就看不见了。我感谢你的帮助！顺序就在代码里。您可以先淡出当前幻灯片，然后淡入下一张幻灯片。这一切都是按照您在代码中指定的顺序进行的。