Question

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

我希望有一个图像，当鼠标悬停在它上面时，它会迅速变为随机图像，并且会很快变为新的随机图像。它一直持续到你将鼠标移开它，然后它停在最后一个图像上。当你再次翻过它时，应该再次开始交换。它有点像老虎机效果。我不需要它们旋转，只需改变它。

我真的可以使用一些关于如何实现这一目标的指针。我真的不知道从哪里开始。我知道如何在鼠标悬停时交换div的背景图像的基础知识，但这就是我所知道的。

感谢

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

Answer 1

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/作为虚拟图像，但每次请求时都会返回一个随机图像，因此这会显示比图像中更多的图像，这使得它有时会加载时髦。

Answer 2

每个jQuery事件都有一个回调函数，所以在mouseover你可以启动一个回调函数A，它调用函数B调用函数A等。在mouseout上，打破无限回调循环。

鼠标悬停时连续图像交换

2 个答案: