连续图像交换，而鼠标悬停 [英] continuous image swap while mouse is hovering

问题描述

我有一个想法，但我不太确定如何执行它。

i have an idea but i'm not quite sure how to execute it.

我想有一个图像，当鼠标悬停在它，它迅速变化到随机图像，并且很快地改变为新的随机图像。它会一直持续直到你把你的鼠标关闭，然后它停在最后一个图像。当你再次翻转它应该开始重新交换。它会像一个老虎机效果。我不需要他们旋转，只是改变位置。

i want have an image that when the mouse hovers over it, it quickly changes to a random image, and changes pretty quickly to a new random image. it keeps going until you take your mouse off it, and then it stops on the last image. when you roll over it again it should start to swap around again. it would sort of be like a slot machine effect. i don't need them to spin around, just change in place.

我真的可以使用一些指针，如何完成这一点。我真的不知道从哪里开始。

i could really use some pointers on how to accomplish this. i don't really know where to start. i know the basics of how to swap a background image of a div on a mouseover, but that's about all i know.

感谢

EDIT： http://cargocollective.com/ 查看左上角的Cargo标志的屏幕。这是我正在寻找的效果，除了它会停在最后的图像，而不是重置。

http://cargocollective.com/ Look at the Cargo logo in the top left corner of the screen. that's the effect i'm looking for, except it would stop on the last image instead of resetting.

推荐答案

JQuery的 .hover（）可以使用 mouseover 和 mouseout 状态，因此执行类似

JQuery's .hover() can use a function for the mouseover and mouseout states, so it's trivial to do something like

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
});​

这里是演示

我对虚拟图片使用 http://lorempixel.com/ ，但他们'每次请求时都会返回一个随机图片，因此这会显示比数组中的图片更多的图片，这使得它有时候更加负载。

I'm using http://lorempixel.com/ for the dummy images, but they'll return a random image each time you request one, so this displays more images than are in the array, and that makes it load funky sometimes.

这篇关于连续图像交换，而鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！