마우스가 떠 다니는 동안 연속 이미지 스왑

Question

나는 아이디어를 가지고 있지만 어떻게 실행해야하는지 잘 모르겠습니다.

마우스를 가져 가면 빠르게 임의의 이미지로 바뀌고 빠르게 새로운 임의의 이미지로 변경되는 이미지가 필요합니다. 마우스를 뗄 때까지 계속 움직이며 마지막 이미지에서 멈 춥니 다. 다시 뒤집을 때 다시 바꿔 치기 시작해야합니다. 그것은 일종의 슬롯 머신 효과처럼 될 것입니다. 나는 그들을 돌아 다닐 필요가 없으며 단지 자리를 바꾼다.

나는 이것을 수행하는 방법에 대한 몇 가지 지침을 실제로 사용할 수 있습니다. 나는 어디서부터 시작해야할지 정말로 모른다. 마우스 오버시 div의 배경 이미지를 바꾸는 방법의 기본 사항을 알고 있지만 그게 내가 아는 전부입니다.

감사

편집 : 화면의 왼쪽 상단 모서리에있는화물 로고에서 http://cargocollective.com/ 봐. 그것이 내가 찾던 결과입니다. 단, 다시 설정하지 않고 마지막 이미지에서 멈추는 것만 다릅니다. 당신이 등 mouseout에 기능 A를 호출하는 함수 B를 호출하는 콜백 함수 A를 시작 무한 콜백 루프를 중단 할 수 mouseover에 있도록

Answer 1

모든 jQuery를 이벤트는 콜백 기능을 가지고 있습니다.

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/을 사용하고 있지만 요청할 때마다 임의의 이미지를 반환하므로 어레이에있는 것보다 더 많은 이미지가 표시되고 때로는 펑키하게로드됩니다.