javascript - jquery 中的幻灯片+旋转木马

Question

我已经在滑动内容面板内实现了幻灯片放映中的内容淡入淡出。

幻灯片放映淡入淡出在滑动面板的第一里，但问题是由于滑动是随机移动的，所以我无法放映幻灯片。

我需要的是，滑动应该等到幻灯片完成它的动画。幻灯片放映完成后，应该会出现滑动面板的下一行。

这是用于此的代码

//Fade in slide show
var quotes = $(".inner_detail div");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();    
//Slider
    $('#news-container').vTicker({ 
        speed: 800,
        pause: 3000,
        animation: 'fade',
        mousePause: false,
        showItems: 1
    });

如果想看幻灯片效果，请把js中的slider代码去掉，就可以看到幻灯片效果了。 (此处 fiddle 仅显示幻灯片)

这是工作 DEMO (在这个演示中，第一个滑动li有幻灯片div，因为滑动速度很快所以看不到)

提前致谢...

Answer 1

如果不修改插件，您将无法实现此目的。它不维护对自身的引用，因此它只是一堆始终运行的函数。你也可以

1. 修改插件并添加对自身的引用as seen here
2. 编写自己的版本

如果您决定使用第一种方法，插件包含一个“isPaused”属性，您可以使用它来暂停插件，直到动画结束。