0

HTML を生成する PHP 関数を呼び出した後、特定のスライダー ID に対して以下の関数を呼び出します。それは問題なく動作し、ホバーでスライドショーを一時停止します。これも問題ありません。しかし、セクションの外に移動すると、firebug から次のエラーが表示されます: TypeError: o.handler.apply is not a function And the slideshow will not continue. 前もって感謝します。

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 に答える