如何在悬停时以规则的时间间隔对图像进行混洗

How to shuffle images at regular time intervals while hovered

本文关键字：图像 混洗 时间 悬停 规则      更新时间：2023-09-26

经过研究：
悬停时更改图像是最接近帮助过我的东西的。它没有太大帮助。我没有任何正式的网络经验。所以，任何这样做的人，都会非常感激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');
}

有什么建议吗？

当<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>

要实现预期结果，请使用计数器

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：更新代码笔

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

相关文章：