Image swap on hover

Answer on SO.

by Joel Kirchartz

HTML

<a href="http://stackoverflow.com/questions/9811165/continuous-image-swap-while-mouse-is-hovering/9811780#9811780">continuous image swap while mouse is hovering</a>
<br/>

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

JavaScript

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"
             ],
    i = 0,
    $swap = $("#swap"),
    swapper;

function swapImg(){
    i = i % images.length;
    $swap.attr("src",images[i]);        
    i++;
}

$swap.hover(function(){
    swapper = setInterval(swapImg,10);
},function(){
    clearInterval(swapper);
});