褪色幻燈片不通過循環

我試圖創建一個淡入淡出的圖像幻燈片，只有我的第一張圖片只是保持清爽，任何人都可以看到我可能會出錯哪裏？褪色幻燈片不通過循環

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); 
});

http://jsfiddle.net/eSrcr/1/

來源

2012-04-18 Liam

今後，請把你的代碼*** ***在這裏，並依靠外部網站僅用於演示目的。在你的情況下，JS小提琴摔倒了（再次......）這個問題本來就沒有用處，也不可能回答。 – 2012-04-18 11:15:08

的問題是，因爲你在你的$active使用可變next()。沒有next()元素，因爲每個img都包含在它自己的a中。

試試這個：

var $next = $active.parent().next("a").find("img").length ? $active.parent().next("a").find("img") : $('#slideshow img:first');

Example fiddle

你需要確保你淡出/隱藏，雖然以前的形象，因爲他們都是不同的大小。

來源

2012-04-18 11:16:13

替換：

var $next = $active.next().length ? $active.next() : $('#slideshow a IMG:first');

有：

var $next = $active.parent().next().find("img").length ? $active.parent().next().find("img") 
    : $('#slideshow a IMG:first');

來源

2012-04-18 11:19:14 kayen

褪色幻燈片不通過循環

回答

相關問題