Question

调用生成HTML的PHP函数后，我将以下函数调用特定的滑块ID。工作正常，悬停暂停幻灯片放映，也行。但当我徘徊在该部分之外时，firebug会出现以下错误： TypeError：o.handler.apply不是函数幻灯片将不会继续。提前谢谢。

function CallSlider(sliderid){
var $slider = $('#'+sliderid);
var $slide = 'li';
var $transition_time = 1000; // 1 second
var $time_between_slides = 2000; // 4 seconds

function slides(){
return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

$('#'+sliderid).hover(function() {
clearInterval(sliderid);

}, sliderid = setInterval(

function(){
  var $i = $slider.find($slide + '.active').index();
//alert('test');
  slides().eq($i).removeClass('active');
  slides().eq($i).fadeOut($transition_time);

  if (slides().length == $i + 1) $i = -1; // loop to start

  slides().eq($i + 1).fadeIn($transition_time);
  slides().eq($i + 1).addClass('active');
}
, $transition_time +  $time_between_slides 
)
);

}

Answer 1

我认为错误与hover()期望参数成为函数的事实有关。

类型：Function（） - 鼠标指针进入/离开元素时执行的函数。 http://api.jquery.com/hover/

我建议将“悬停”代码放在自己的函数中，如下所示：

$('#'+sliderid).hover(
  function() {
    // hover over
    clearInterval(sliderid);
  },
  function () {
    // hover off
    sliderid = setInterval(...);
  }
);

编辑：

以下是基于您提供的代码，如何保持灵活性（例如动态列表）的示例。

var slide = 'li';
var transition_time = 1000; // 1 second
var time_between_slides = 2000; // 4 seconds


function startCycle($slider, $slides) {
    return setInterval(
        function () {

            var $thisslide=jQuery(slide+'.active',$slider);
            var $nextslide=($thisslide.next(slide).length?$thisslide.next(slide):$slides.eq(0));
            $thisslide.removeClass('active').fadeOut(transition_time);
            $nextslide.fadeIn(transition_time).addClass('active');

        }, transition_time + time_between_slides
    );
}

jQuery('ul.slider').each(function () {

    var sliderid;

    var $slider = jQuery(this);
    var $slides = $slider.find(slide);

    $slides.fadeOut();

    // set active classes
    $slides.first().addClass('active').fadeIn(transition_time);

    $slider.hover(
        function () {
            // hover over
            clearInterval(this.sliderid);
        },
        function () {
            // hover off
            this.sliderid = startCycle($slider, $slides);
        }
    );

    this.sliderid = startCycle($slider, $slides);

});

http://jsfiddle.net/gk74V/1/

悬停后jQuery间隔不会重启

1 个答案:

编辑：