すべての画像は角度が異なり、すべて透明であるため、すべての画像が互いに背後にあることがわかります。一番上の画像だけを表示し、残りの画像を非表示にする方法はありますか? .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>