查看後從幻燈片中刪除jQuery幻燈片

Question

我正在處理幾個不同的jQuery幻燈片，並且想法讓我有一個介紹幻燈片。一旦訪問者看到幻燈片並閱讀它，這些信息就沒用了。以jQuery Cycle爲例，如何在訪問者導航到「幻燈片2」後刪除「幻燈片1」。

我很想讓這種方法工作，而不是使用彈出式窗口或定時器功能來移除幻燈片。

有什麼想法？

Answer 1

我覺得這篇文章會幫助你。在這裏，他們已經給周圍的工作與示例代碼從jQuery的週期插件運行幻燈片添加/刪除幻燈片。

http://forum.jquery.com/topic/jquery-jquery-cycle-remove-slide

Answer 2

是不是真的有一個很好的辦法，據我知道要做到這一點。 jQuery Cycle插件在使用它將切換的所有元素進行調用時進行初始化。還有其他的分歧需要考慮，比如你使用的是尋呼機在去除之後第一個發生什麼事情？我認爲你最好的選擇是使用標準的jQuery動畫效果，並在其回調中啓動你的幻燈片。

所以這裏有兩個解決方案。首先，調用自己的jQuery循環在回調中自行銷燬，然後重新啓動。

http://jsfiddle.net/RQapW/2/

$('div').cycle({ 
    timeout: 500, 
    after: myFunction 
}); 

function myFunction(currSlideElement, nextSlideElement, options, forwardFlag) { 
    console.log(currSlideElement.src + ' : ' + nextSlideElement.src); 

    //if we are on the second slide then remove the first one and restart slideshow 
    if (currSlideElement == $('img')[0] && nextSlideElement == $('img')[1]) { 
     $('div').cycle('destroy'); 
     $(currSlideElement).remove(); 
     $('div').cycle({ 
      timeout: 500, 
     });  
    } 
} 

只需使用jQuery的典型動畫效果。

http://jsfiddle.net/RQapW/

$('img.first').load(function() { 
    $(this).fadeOut(5000, function() { 
     $(this).remove(); 
     $('body').cycle({timeout: 500}); 
    }) 
});