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

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

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

非常感謝！

2012-09-11 Peter Schmidler

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)

來源

2012-09-11 21:53:00 ahren

感謝很多重複。現在只剩下一個錯誤了。當第一張圖像再次消失時，當我點擊「停止」時，它會在背景上淡出，然後再次淡入。也有解決方案嗎？這會很棒！ –

@PeterSchmidler - 我當然知道。我更新了筆。您可以保存以前的索引並檢查它。 – ahren

太棒了！非常感謝！ –

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

來源

2012-09-11 21:49:55 Systembolaget

$(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"); 
    }); 

});

來源

2012-09-11 22:02:58 Korikulum

也謝謝！你的解決方案與ahren's有相同的錯誤。當第一張圖像再次消失時，當我點擊「停止」時，它會淡出爲白色（背景），然後再次淡入。任何線索如何擺脫這一點？ PS –

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

回答

相關問題