jQuery不同步

我有一个幻灯片和另一个功能,使用下面的代码更改四个框的样式：

jQuery(document).ready(function() {
    jQuery('#fp-slides')
    .cycle({
        fx: 'fade',speed:  '2500',timeout:  '3500',});
    var $elements = $('#fp-menu h2 a'); 

var total_elements = $elements.length;
var element_with_class = 0;
var handler = function () {
  $elements.eq(element_with_class).removeClass('over');
  element_with_class += 1;
  if ( element_with_class === total_elements )
  {
      element_with_class = 0;
  }
  $elements.eq(element_with_class).addClass('over'); 
};
window.setTimeout( function() { 
    handler(),window.setInterval(handler,6000); 
},4000);


});

第二个函数的第一个更改需要更快,然后设置为6000毫秒…这很好,但使用jQuery.cycle函数的顶级幻灯片在转换的几个循环后不同步.有没有办法让这些保持同步？

解决方法

怎么样…

jQuery(document).ready(function() {
    var slides = jQuery('#fp-slides')
    slides.cycle({
        fx: 'fade',}).cycle('pause');

    var $elements = $('#fp-menu h2 a'); 

    var total_elements = $elements.length;
    var element_with_class = 0;
    var handler = function () {
        $elements.eq(element_with_class).removeClass('over');
        element_with_class += 1;
        if ( element_with_class === total_elements ) {
            element_with_class = 0;
        }
        $elements.eq(element_with_class).addClass('over'); 
        slides.cycle("next");
    };
    window.setTimeout( function() { 
        handler(),6000); 
    },4000);
});

这可能不是你想要的,但基本上,我告诉循环器立即暂停,然后在你的handler()函数中,它告诉循环器移动到下一张幻灯片.

这样循环器只会在你的setInterval()中及时生成动画.你可能需要用更多的setTimeouts来调整它以获得你想要的确切效果,但这应该可以解决同步问题.