1

ここのスライダーに問題があります。スライダーをホバーしたときに一時停止したい。残念ながら、私は要点を理解していません。何か案は？jsFiddle へのリンクを更新: http://jsfiddle.net/fZYK4/

$(function(){
    var slide = $('.productSlide');
    $('.productSlider ul').removeClass('displaynone');

    slide.not(':first').hide();
    $('.productSlider ul a:first').addClass('active');
    $('.productSlider ul a').on('hover', function(e){
        e.preventDefault(false);
        var target = $(this).attr("href");
        $('.productSlider ul a').removeClass('active');
        $(this).toggleClass('active');
        slide.not('#'+target).hide();
        $(target).show();
    });
    var counter = 0;
        if( slide.length > 1 ){         
            slide.hide();
            slide.first().show();
            setInterval(function() {
                slide.eq(counter).hide();
                counter++;
                if (counter == slide.length) {
                    counter = 0;
                }
                slide.eq(counter).show();
                $('.productSlider ul a').removeClass('active');
                $('.productSlider ul a').eq(counter).toggleClass('active');
            }, 5000);           
        };
});
4

1 に答える 1

2

設定する間隔を割り当てる必要があります

var counter = 0;
var myInterval;
if ( slide.length > 1 ) {
  slide.hide().first().show();
  myInterval = setInterval(function() {
   // ... and so on

ホバーでクリアします

$('.productSlider ul a').on('mouseenter', function(e){
  clearInterval(myInterval);
  // ... and so on

ユーザーがホバリングした場合にリセットする場合は、次の関数をラップするのが最適です。

function doAnimation() {
            return setInterval(function() { 
              slide.eq(counter).hide();
              counter++;
              if (counter == slide.length) {
                counter = 0;
              }
              slide.eq(counter).show();
              $('.productSlider ul a').removeClass('active');
              $('.productSlider ul a').eq(counter).toggleClass('active');
            }, 5000);
        }

そして、たとえば、mouseleaveのように、開始したい場所に呼び出します。

$('.productSlider ul a').on('mouseleave', function(e){
   myinterval = doAnimation();
于 2012-07-05T16:03:03.387 に答える