0

1 つの値を操作するだけで、4 秒ごとにページの画像を変更する setInterval() 関数があります。

setInterval(function(){
    changeSlide(slideNumber);
    slideNumber++;
    if(slideNumber===5)slideNumber=0;
},4000);

ご覧のとおり、この値は slideNumber です。

今、私が欲しいもの：

element(lets say id="hoverElement") で mouseenter を移動すると、画像が所定の位置に留まる必要があるため、間隔を停止する必要があり、私の changeSlide はそれらの画像を表示および非表示にします。

マウスを離すと、4000 ミリ秒待機して続行します。

どうすればいいですか？

編集：

申し訳ありませんが、うまくいきません

これは私のコードです

function slide(){
    slideTimer = setInterval(function(){
        changeSlide(slideNumber);
        slideNumber++;
        if(slideNumber===5)slideNumber=0;
    },4000);
}

slide();

$('#hoverElement').mouseenter(function(){
    clearInterval(slideTimer);
    console.log('mouseenter');
});
$('#hoverElement').mouseleave(function(){
    slide();
    console.log('mouseleave');
});

ほぼ同じで、mouseenter の間隔を停止しません。以前にあなたのコードを試しましたが、うまくいきませんでした。

4

1 に答える 1

2

ホバー時に間隔を開始してクリアするだけです：

var timer, slideNumber = 0;

function slide() {
    timer = setInterval(function(){
        changeSlide(slideNumber);
        slideNumber++;
        if(slideNumber===5) slideNumber=0;
    },4000);
}

function unslide() {
    clearInterval(timer);
}

slide();

$('#hoverElement').on({
    mouseenter: unslide,
    mouseleave: slide
});

これが動作することを示すデモンストレーションです！

于 2013-07-02T13:10:02.750 に答える