從我的幻燈片中顯示的圖像透明背景？

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