Question

因为所有图像都有不同的角度并且都是透明的，所以你可以看到它们都在彼此之后。有没有办法只显示顶部图像，其余部分是隐藏的？我可以隐藏我的.js文件或.css中的图像吗？

我仍然希望图像是透明的，现在我刚刚添加了一个背景来覆盖所有图像。

所以我猜我怎样才能让幻灯片中的图像保持透明，但不能显示背后的图像。

http://kennenmen.netai.net/test.php

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

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

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

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

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

$(function() {
setInterval( "slideSwitch()", 400 );
});


    <div id="slideshow">
<img src="http://images.lasuni.com/users/5/0/kennen.png" alt="" class="active" />
<img src="http://images.lasuni.com/users/2/0/kennen.png" alt="" />
<img src="http://images.lasuni.com/users/8/0/kennen.png" alt="" />
<img src="http://images.lasuni.com/users/4/0/kennen.png" alt="" />
<img src="http://images.lasuni.com/users/6/0/kennen.png" alt="" />
<img src="http://images.lasuni.com/users/3/0/kennen.png" alt="" />
<img src="http://images.lasuni.com/users/7/0/kennen.png" alt="" />
<img src="http://images.lasuni.com/users/1/0/kennen.png" alt="" />
</div>

Answer 1

function slideSwitch() {
    var $active = $('#slideshow img.active');
    if ($active.is(':last')) {
        $active.hide().removeClass('active');
        $('#slideshow img:first').show().addClass('active');
    }else{
        $active.hide().removeClass('active').next().show().addClass('active');
    }
}

$(function () {
    $('#slideshow img').not('.active').hide()
    setInterval(slideSwitch, 400);
});

FIDDLE

Answer 2

为避免丢失一张图片，我必须将最后一个答案的第三行更改为

if ($active.is(':nth-last-child(1)')) {

从我的幻灯片放映的图像透明背景？

2 个答案: