要素ホバーの一時停止機能

Question

5秒ごとに画像を変更する画像スライダーがありますが、div imgにマウスを合わせるとスライダーを一時停止します。ホバー上の 'theRotator'機能を一時停止して、マウスがdivの外に移動した後に再起動する方法はありますか？皆さんありがとう！

function theRotator() { 
    //Set the opacity of all images to 0 
    $('div.rotator ul li').css({opacity: 0.0}); 

    //Get the first image and display it (gets set to full opacity) 
    $('div.rotator ul li:first').css({opacity: 1.0}); 

    //Call the rotator function to run the slideshow, 

    setInterval('rotate()',5000); 

} 

$(document).ready(function() {  
    //Load the slideshow 
    theRotator(); 
    $('div.rotator').fadeIn(1000); 
    $('div.rotator ul li').fadeIn(1000); // tweek for IE 
}); 

Answer 1

：

var interval; 

function theRotator() { 
    $('div.rotator ul li').css({opacity: 0.0}); 
    $('div.rotator ul li:first').css({opacity: 1.0}); 
    interval = setInterval(rotate, 5000); 
} 

$(document).ready(function() { 
    theRotator(); 
    $('div.rotator').fadeIn(1000); 
    $('div.rotator ul li').fadeIn(1000); // tweek for IE 

    $('div.rotator ul li').hover(function() { 
     clearInterval(interval); 
    }, 
    function() { 
     interval = setInterval(rotate, 5000); 
    }); 
}); 

Answer 2

あなたはsetInterval関数によって返される間隔ハンドルを取得することをお勧めします。また、私はmouseenterとmouseleaveを使いました。あなたが望む機能に適しているからです。

function theRotator() { 
    //Set the opacity of all images to 0 
    $('div.rotator ul li').css({opacity: 0.0}); 

    //Get the first image and display it (gets set to full opacity) 
    $('div.rotator ul li:first').css({opacity: 1.0}); 

    //Call the rotator function to run the slideshow, 

    window.rotatorInterval = setInterval(rotate,5000); 
} 

$(document).ready(function() { 

    //Load the slideshow 
    theRotator(); 

    $('div img').mouseenter(function(){ 
     clearInterval(window.rotatorInterval); 
    }).mouseleave(function() { 
     window.rotatorInterval = setInterval(rotate, 5000); 
    }); 

    $('div.rotator').fadeIn(1000); 
    $('div.rotator ul li').fadeIn(1000); // tweek for IE 
}); 

Answer 3

あなたは

var rotate = true; 

$('img').on({ 
    mouseenter: function() { 
     rotate = false; 
    }, 
    mouseleave: function() { 
     rotate = true; 
    } 
});​ 

ような何かをし、あなたのrotate()機能でそのフラグをチェックすることができますが、単にこのように、マウスオーバーのタイムアウトをオフにして、マウスアウトでそれを再作成する必要があり