从我的幻灯片中显示的图像透明背景？

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)')) {