幻灯片+传送带一起在jquery

我已经实现了滑动内容面板中的幻灯片放映内容淡入淡出。幻灯片+传送带一起在jquery

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

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

下面是用于该

//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（本演示中的第一滑动李娜幻灯片DIV这不能被看作是因为滑动快速移动）

谢谢前进...

来源

2013-05-08 Sowmya

我并不完全理解这里的问题 – 2013-05-08 10:46:57

需要完整地显示幻灯片，然后滑动下一个li ... – Sowmya 2013-05-08 10:50:16

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

//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-21 09:22:38 Sowmya

你可以把一个工作示例jsFiddle – Learning 2013-05-21 13:46:58

@KnowledgeSeeker我其实试图把，但为此，我需要链接更新的vticker.js在小提琴中，我没有该文件上传到任何地方。有没有免费的网站，我可以上传js文件并将其链接到jsfiddle？ – Sowmya 2013-05-22 06:16:08

你可以添加一个链接到vticker.js，如果它是在互联网上的某个地方或复制粘贴代码在JS部分jsFiddler – Learning 2013-05-22 06:19:55

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

修改插件，并添加到自身的引用as seen here
写你自己的版本

如果你决定去与第一种方法，插件包含“isPaused得到的财产，您可以使用它来暂停插件直到动画结束。

来源

2013-05-08 11:19:38

我认为你可以做到这一点，如果你知道确切的没有。在幻灯片的元素从您可以做简单的步骤，就像

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

2）现在你可以延迟滑块XXX没有秒Wait_For_SlideToFinish，然后才能启动滑块功能。

如果我理解你的问题，那么这可以为你工作。

来源

2013-05-08 11:36:03 Learning

请问assuem 3号码并在小提琴中添加它的代码？ – Sowmya 2013-05-08 11:58:32

这是一个高效的解决方案，因为它只会第一次工作。 Sowmya，我告诉过你哪里存在问题。这取决于你解决它。或者你可以留在这里等待别人为你写，这不是堆栈溢出的问题。 – 2013-05-08 12:47:52

我同意Stystael – Learning 2013-05-08 12:51:08

你想要这样的东西吗？

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-21 08:08:54

幻灯片+传送带一起在jquery

回答

相关问题