如何在悬停时以固定时间间隔随机播放图像

Question

研究后：
Changing images on hover 是关于最接近帮助我的东西的发现。它没有多大帮助。我没有任何正式的网络经验。因此，任何这样做的人，将不胜感激 a) 解决我的问题，但 b) 真正知道为什么这件事不洗牌图像..

这就是我在 HTML 中所处的位置：

<div class="navBar" id="myNavBar">    
    <ul id="navOptions">

        <li> <img id="logo" 
              src="images/logo.png" 
              onmouseover="hoverFunction(this);" ></li>

        <li class="active"><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
    </ul>
</div>

我的 JavaScript：

function hoverFunction(element) {
    var images = ["images/logo.png",
                  "images/logo_2.png",
                  "images/logo_3.png",
                  "images/logo_4.png",
                  "images/logo.png"];

    for(var i=0; i < images.length; i++){
        $(element).attr("src",images[i]);
    }
    //element.setAttribute('src', 'images/logo_2.png');
}

有什么建议吗？

Answer 1

您似乎想要的是，当<img> 悬停时，定期更改图像。通常，当您收到mouseenter 事件时，这将通过使用setInterval() 启动一个间隔计时器来完成。每次间隔触发时将调用的函数更改为下一个图像。当您收到mouseout 事件时，您将使用clearInterval() 停止间隔计时器。

以下代码将在鼠标悬停在<div> 上时循环显示图像：

var images = ["http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a",
              "http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4",
              "http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb",
              "http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/su/su-icon.png?v=0ad5b7a83e49"
];
var curImageIndex = 0; // 0 is displayed by default
var intervalId; //Remember the ID of the interval so we can stop it later.

function startImageCycle(el){
    cycleImage(el); //Cycle the image now so feels responsive. Remove if not wanted.
    intervalId = setInterval(cycleImage,1000,el); //Change image every 1000ms (1s)
}
function stopImageCycle(el){
    clearInterval(intervalId);
}
function cycleImage(element){
    curImageIndex++;
    if(curImageIndex >= images.length) {
        curImageIndex = 0;
    }
    $(element).attr("src", images[curImageIndex]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navBar" id="myNavBar">
      <ul id="navOptions">
        <li>
          <img id="logo" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"
               onmouseenter="startImageCycle(this);" onmouseout="stopImageCycle(this);"
        </li>
        <li class="active"><a href="default.asp">Home</a>
        </li>
        <li><a href="news.asp">News</a>
        </li>
        <li><a href="contact.asp">Contact</a>
        </li>
        <li><a href="about.asp">About</a>
        </li>
      </ul>
    </div>

Answer 2

要达到预期结果，请使用计数器

var counter=1;
function hoverFunction(element) {
   counter++
    var images = ["http://www.w3schools.com/css/img_fjords.jpg",
              "http://www.w3schools.com/css/img_forest.jpg",
              "http://www.w3schools.com/css/img_lights.jpg",
              "http://www.w3schools.com/css/img_fjords.jpg",
              "http://www.w3schools.com/css/img_forest.jpg"];

   $(element).attr("src",images[counter]);
  if(counter ==5){
    counter=1;
  }

//element.setAttribute('src', 'images/logo_2.png');
}

http://codepen.io/nagasai/pen/jAZogO

选项2：更新的codepen

http://codepen.io/nagasai/pen/WxYwvK