Question

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

幻灯片放映在滑动面板的第一个li中，但问题是因为滑动随机移动我无法显示幻灯片放映。

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

以下是用于该

的代码

//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中的滑块代码，然后您就可以看到幻灯片的工作原理了。（此处 fiddle 仅显示幻灯片演示）

这是工作 DEMO （在这个演示中，第一个滑动的li有幻灯片div，因为滑动速度很快而无法看到）

提前致谢...

Answer 1

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

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

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

Answer 2

如果你知道确切的没有，我想你可以做到。幻灯片中的元素来自他们可以做的简单步骤，如

1）Wait_For_SlideToFinish = NO.Of.Elements * (fadeIn_Value + delay_Value + fadeOut_value )

2）现在，您可以在启动滑块功能之前延迟xxx的延迟滑块Wait_For_SlideToFinish。

如果我理解你的问题，那么这对你有用。

Answer 3

你想要这样的东西吗？

 var quotes = $(".inner_detail div");
    var quoteIndex = -1;
    var fadeIn_time = 2000, delay_time = 2000, fadeOut_time = 2000;
    var time_length = quotes.length*(fadeIn_time + delay_time + fadeOut_time);

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

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

Answer 4

我找到了解决方法。我已经使用了回调函数来停止滑块，直到它完成了动作。

//Editorial Slide + Carousel
var isAni = true;
$(window).load(function(){
var quoteIndex = -1;

function showNextQuote(ele,e) {
    ++quoteIndex;
    e.isPaused = true;  
    if(quoteIndex < ele.length-1){
        ele.eq(quoteIndex % ele.length).fadeIn(2000,"swing").delay(2000).fadeOut(2000,"swing", function(){
            showNextQuote(ele,e)
        });
    }else{
        ele.eq(quoteIndex % ele.length).fadeIn(2000,"swing").fadeOut(2000,"swing",function(){ele.eq(quoteIndex+1 % ele.length).fadeIn(0);
        quoteIndex = -1;e.isPaused = false;});
    }
}
//showNextQuote();  

//Slider
    $('#news-container').vTicker({ 
        speed: 800,
        pause: 3000,
        animation: 'fade',
        mousePause: true,
        showItems: 1,
        callback : function(ele,e){
            var inner = ele.children("li:first").find("div.inner_detail");
            if(inner.length !=0){
                quoteIndex = -1;
                showNextQuote(inner.find("div"),e);
            }
        }
    });
});

PS - 回调函数是用vticker.js编写的，但不幸的是我无法在这里发布该文件。

感谢大家的回复!!!

幻灯片+旋转木马一起在jquery

4 个答案: