jQuery 不同步

Question

我有一个幻灯片放映和另一个功能，可以使用下面的代码更改四个框的样式:

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 函数的顶部幻灯片在几次转换循环后不同步。有没有办法让它们保持同步？

Answer 1

怎么样...

jQuery(document).ready(function() {
    var slides = jQuery('#fp-slides')
    slides.cycle({
        fx: 'fade',
        speed:  '2500', 
        timeout:  '3500', 
    }).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(), 
        window.setInterval(handler, 6000); 
    }, 4000);
});

这可能不是正是你想要的，但基本上，我已经告诉循环仪立即暂停，然后在你的 handler() 函数中，它告诉循环仪移动到下一个幻灯片。

这样，循环仪将只会根据您的 setInterval() 及时设置动画。您可能需要使用更多的 setTimeouts 来调整它以获得您想要的确切效果，但这应该可以解决同步问题。