Question

我正在为我的女友以及一个带有淡入淡出过渡的图像的简单幻灯片放映创建在线投资组合。我希望能够在显示一个新的“活动”幻灯片时“隐藏”上一个“最后活动”幻灯片。

我已经修改了此处提供的幻灯片（http://jonraasch.com/blog/a-simple-jquery-slideshow），因此它不是自动循环，而是由“上一个/下一个”按钮控制。一切都很好。与上面的示例相反，我需要在幻灯片中显示不同大小的图像。

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

我已经在$ 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中删除活动和上次活动的类之后，将其不透明度重新设置为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');
        });
}

如果您还希望它淡出而不是仅变为不透明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幻灯片中隐藏上一张幻灯片？

1 个答案: