フェードインおよびフェードアウトする画像のスライドショーを作成しようとしていますが、最初の画像だけが更新され続けます。どこが間違っているのか誰かにわかりますか?
HTML:
<div id="slideshow">
<a href="#"><img src="http://placekitten.com/200/300" class="active"/></a>
<a href="#"><img src="http://placekitten.com/300/400"/></a>
<a href="#"><img src="http://placekitten.com/350/500"/></a>
<a href="#"><img src="http://placekitten.com/370/600"/></a>
</div>
jQuery:
function slideSwitch() {
var $active = $('#slideshow a IMG.active');
if ($active.length == 0) $active = $('#slideshow a IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next() : $('#slideshow a IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({
opacity: 0.0
}).addClass('active').animate({
opacity: 1.0
}, 1000, function() {
$active.removeClass('active last-active');
});
};
$(function() {
setInterval(slideSwitch, 5000);
});