如何仅在悬停时正确循环显示图像？

Question

我有一个显示图像拼接的网站。

当页面加载时，我在每个image-div数据属性中存储一组图像链接。因此，马赛克中的每张图片都是带有背景图像的div，并且具有与之关联的图像链接数组。

我想这样做，当你将鼠标悬停在图像上时，它会每隔几秒更改div的背景图像，但只有当鼠标悬停在图像上时才会这样。

当我将鼠标悬停在任何一张图片上时，我会运行此代码

$(@).find('div.item').mouseenter ->
    return if $(@).attr("class") == "item is-expanded"
    enteredDiv = $(this)
    changeImage(enteredDiv)

$(@).find('.item').mouseleave ->
  return if $(@).attr("class") == "item is-expanded"
  clearInterval stopChangeImage

调用这些函数

x = 0
stopChangeImage = null

changeImage = (enteredDiv) ->
  workImg = enteredDiv.children('.item-content').data('work-img')
  console.log 'attachment url image test ' + workImg[0]
  selectedImg = workImg[x]
  x++
  x = 0  if x >= workImg.length
  if selectedImg
    enteredDiv.children('.item-content').css 'background-image','url(' + selectedImg + ')'
    stopChangeImage = 
      setInterval(->
        changeImage enteredDiv
      , 1000)

但是我得到了非常多的结果。它开始翻阅图像，但它不会在鼠标上停止。此外，间隔开始变得非常错误，时间不正确。请帮我找到更好的方法来做到这一点！谢谢！

Answer 1

你可以每秒找到所有正在悬停的扩展项目div（可能只有一个）并立即更改其图像：

setInterval(function(){
 $('div.item.is-expanded:hover').each(
  function(){changeImage($this);}
 );
},1000);

function changeImage()
{
 [function from your question]
}

Answer 2

我不想进入代码，但让imgDivs成为所有div的数组（例如，让它调用getElementsByClassName），并让每个div包含一个数组{{1带有图像的链接。

link

@Teh Walris解决方案每秒都会迭代div，而我却没有。

但它有效吗？