マウスがホバリングしている間、連続的な画像のスワップ

Question

私はアイデアを持っていますが、私はそれをどのように実行するかについてはあまりよく分かりません。

マウスの上にマウスを置くと、すぐにランダムイメージに変わり、新しいランダムイメージにすばやく変わるイメージが必要です。マウスを離してから最後の画像で停止します。あなたがもう一度ロールオーバーすると、もう一度スワップするようになります。それはスロットマシンのようなものになるでしょう。私は彼らの周りを回る必要はありません、ちょうどその場で変更します。

私は本当にこれを達成するためのいくつかのポインターを使用することができます。私はどこから始めるべきか本当に分かりません。私はマウスオーバーでdivの背景イメージをスワップする方法の基礎を知っていますが、それはすべて私が知っていることです。

おかげ

EDIT：画面の左上隅にある貨物のロゴでhttp://cargocollective.com/ルック。それはリセットの代わりに最後の画像で停止することを除いて、私が探している効果です。

Answer 1

すべてのjQueryイベントにコールバック関数があるため、mouseoverには、関数Aなどを呼び出す関数Bを呼び出すことができます。 mouseoutで、無限コールバックループを解除します。

Answer 2

jQueryの.hover()mouseoverとmouseout状態の機能を使用するので、それはのような何かをする些細なのですができ

HTML：

<img id="swap" src="http://lorempixum.com/200/200/sports" alt=""/> 

jqueryの：

var images = ["http://lorempixum.com/200/200/sports", 
       "http://lorempixum.com/200/200/food", 
       "http://lorempixum.com/200/200/abstract", 
       "http://lorempixum.com/200/200/people", 
       "http://lorempixum.com/200/200/technics", 
       "http://lorempixum.com/200/200/city" 
      ],//store a bunch of images in an array 
    i = 0,//counter 
    $swap = $("#swap"),//only get the object once 
    swapper;//setup a var for setInterval 

function swapImg(){ 
    i = i % images.length;//keep i under the array length 
    $swap.attr("src",images[i]);// change image src   
    i++; 
} 

$swap.hover(function(){//mouseover 
    swapper = setInterval(swapImg,10);//call function every 10ms 
},function(){//mouseout 
    clearInterval(swapper);//stop calling the image swapper 
});​ 

here's a demo

ダミー画像にhttp://lorempixel.com/を使用していますが、要求するたびにランダムな画像が返されるため、配列より多くの画像が表示され、ときどき読み込みが不安定になることがあります。