因为所有图像都有不同的角度并且都是透明的,所以你可以看到它们都在彼此后面。有没有办法只让顶部图像可见而其余图像被隐藏?我可以隐藏 .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>