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

Question

我正在为我的女朋友创建一个在线作品集，并为此制作一个带有淡入淡出过渡的简单图像幻灯片。当显示新的 "active" 幻灯片时，我希望能够 "hide" 上一张 "last-active" 幻灯片。

我修改了此处提供的幻灯片 (http://jonraasch.com/blog/a-simple-jquery-slideshow)，因此它不是自动循环，而是由 'prev / next' 按钮控制。这一切都很好。与上面的示例相反，我需要在幻灯片中使用不同大小的图像。

问题：幻灯片放映的方式就像一堆图片，我看到的是当前 "active" 后面的前一张图片。例如。在垂直（纵向）图像和水平（横向）图像之间切换时，我可以看到纵向图像后面的横向图像。

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

HTML:

<div id="slideshow">
    <div class="active">
        <img src="horizontal.jpg">
    </div>

    <div>
        <img src="vertical.jpg">
    </div>

</div>

<div id="controls">
<span class="control-prev">prev</span> / <span class="control-next">next</span>
</div>

CSS:

#slideshow {
    position:relative;
    height:400px;
}

#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 400px;
    background-color: white;
}

#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:9;
}

#slideshow DIV IMG {
    height: 350px;
    display: block;
    border: 0;
    margin-bottom: 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.

Answer 1

从您的 div 中删除活动和 last-active 类后...将它们的不透明度重置回 0.0，这样下次它会再次动画（淡入）：

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.css({opacity: 0.0})
                   .removeClass('active last-active');
        });
}

如果您还希望它 fade-out，而不是仅仅将不透明度设置为 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')
                       });
            });

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

How do I hide previous slide in a simple jQuery slideshow?

javascript

jquery

image

slideshow

hide