jQuery圖像幻燈片，在停止後淡出回到第一個圖像

Question

我想要建立一個圖像幻燈片，在停止後淡出回到第一個圖像，但我不明白。任何人都會如此善良的指向我的解決方案？

下面的代碼：http://codepen.io/peterschmidler/pen/hFHtJ

非常感謝！

PS

Answer 1

代碼：http://codepen.io/anon/pen/zJFcj

if (context.hasClass("stopshow")) { 
    next = context.find('.images img:first'); 
    stopshow = true; 
}else{ 
    next = next.length ? next : context.find('.images img:first'); 
} 

這裏，我們只是檢查，看看是否類stopshow存在，並且使用簡單的if語句來操縱我們的next分配。

然後在動畫回調，我們只有在stopshow變量是不正確的

if(!stopshow) filesCrossfade(context) 

Answer 2

爲什麼重新發明輪子？試試衆所周知的jQuery循環幻燈片插件。它很輕便，適用於移動設備，非常易於實施，並且有許多非常實用的定製選項。請參閱here。

Answer 3

$(document).ready(function(){ 

    function filesCrossfade(context) { 
    if (context.hasClass("stopshow")) { 
     context.find('.images img.active').removeClass('active').delay(500).fadeOut(500); 
     context.find('.images img:first').addClass('active').delay(500).fadeIn(500); 
     return; 

    } 

    if (context.find('.images img').length > 1) { 

     var active = context.find('.images img.active'); 
     var next = active.next(); 
     next = next.length ? next : context.find('.images img:first'); 
     active.removeClass('active').delay(500).fadeOut(500); 
     next.addClass('active').delay(500).fadeIn(500, function() { 
     filesCrossfade(context) }); 

    } 

    } 

    $(".content .slideshow").each(function(){ 
    $(this).find('.images img').hide(); 
    $(this).find('.images img').eq(0).fadeIn(500); 

    }); 

    filesCrossfade($(".content .slideshow").eq(0)); 

    $('.stop').click(function(){ 
    $(".content .slideshow").eq(0).addClass("stopshow"); 
    }); 

});