0

在调用生成 HTML 的 PHP 函数后，我为特定的滑块 id 调用下面的函数。效果很好，悬停暂停幻灯片，也可以。但是当我悬停在该部分之外时，萤火虫会给出以下错误： TypeError: o.handler.apply is not a function 幻灯片不会继续播放。提前致谢。

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 
)
);

}
4

1 回答 1

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/

于 2013-09-09T18:07:35.473 回答