2012-09-11 122 views

回答

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) 
+0

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

+0

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

+0

太棒了!非常感謝! –

0

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

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

}); 
+0

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