查看后从幻灯片中删除 jQuery 幻灯片答案

【问题标题】：Remove jQuery slide from slideshow after viewing查看后从幻灯片中删除 jQuery 幻灯片
【发布时间】：2015-04-08 03:47:17
【问题描述】：

我正在处理几个不同的 jQuery 幻灯片放映，我想到了制作介绍幻灯片。一旦访问者看过幻灯片并阅读了它，这些信息就毫无用处了。以 jQuery Cycle 为例，如何在访问者导航到“幻灯片 2”后删除“幻灯片 1”。

我希望这种方法能够正常工作，而不是使用弹出窗口或计时器功能来删除幻灯片。

有什么想法吗？

【问题讨论】：

你能发布你的代码吗？
我没有任何代码。只是理论问题。

标签： jquery slideshow jquery-cycle

【解决方案1】：

我认为这篇文章会对你有所帮助。在这里，他们使用示例代码解决了在 jQuery 循环插件中的运行幻灯片中添加/删除幻灯片的方法。

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

【讨论】：

【解决方案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});
    })
});

【讨论】：