9

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

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

我需要的是，滑动应该等到幻灯片完成动画。幻灯片放映完成后，滑动面板的下一个 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中的滑块代码去掉，然后你就可以看到幻灯片是如何工作的了。（这里只显示幻灯片）

这是工作演示（在此演示中，第一个滑动 li 具有无法看到的幻灯片 div，因为滑动移动得很快）

提前致谢...

4

4 回答 4

3

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

  1. 修改插件并添加对自身的引用，如此处所示
  2. 编写自己的版本

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

于 2013-05-08T11:19:38.907 回答
2

如果您知道确切的号码，我认为您可以做到。幻灯片中的元素，您可以执行简单的步骤，例如

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

2) 现在您可以将滑块延迟 xxx 秒Wait_For_SlideToFinish ，然后才能启动滑块功能。

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

于 2013-05-08T11:36:03.277 回答
0

你想要这样的东西吗？

 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
    });
于 2013-05-21T08:08:54.990 回答
0

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

//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 编写的，但不幸的是我无法在此处发布该文件。

谢谢大家的回复！！！

于 2013-05-21T09:22:38.747 回答