鼠標懸停時連續圖像交換

-1

我有一個想法，但我不太確定如何執行它。鼠標懸停時連續圖像交換

我想要一個圖像，當鼠標懸停在它上面時，它會快速更改爲隨機圖像，並很快更改爲新的隨機圖像。它會一直持續下去，直到你將鼠標從它上面移開，然後停在最後一個圖像上。當你再次翻轉它時，它應該開始再次交換。它會有點像老虎機效應。我不需要他們旋轉，只是改變原地。

我真的可以使用一些關於如何實現這一點的指針。我真的不知道從哪裏開始。我知道如何在鼠標懸停上交換div的背景圖像的基礎知識，但這就是我所知道的。

感謝

編輯：http://cargocollective.com/看在屏幕的左上角的貨物標誌。這就是我正在尋找的效果，除非它會停留在最後一張圖片上，而不是重新設置。

來源

2012-03-21 patricko

您可能需要JavaScript。 – j08691 2012-03-21 19:06:24

我該怎麼用Javascript做到這一點？我願意深入研究一個例子 – patricko 2012-03-21 19:15:06

或者，想一想，您可以嘗試在懸停時顯示快速循環的動畫gif。這可行嗎？ – 2012-03-21 19:44:01

每一個jQuery的事件有一個回調函數，等等mouseover你可以開始一個回調函數的調用函數B調用函數A等在mouseout，打破了無限的回調循環。

來源

2012-03-21 19:40:40

完美的概念。 +1 – 2012-03-21 19:42:28

好吧，這是有道理的。現在就去試試吧。 – patricko 2012-03-21 19:49:51

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/，但每次請求時都會返回一張隨機圖像，因此顯示的圖像比數組中顯示的圖像更多，這會使其有時會加載時髦。

來源

2012-03-21 19:47:31 JKirchartz

鼠標懸停時連續圖像交換

回答

相關問題