Javascript 在没有任何悬停或其他触发的情况下连续交换图像

发布于01月25日

我正在try 编写不使用"on hover"或任何其他触发器的代码.这只是HOVER事件的一个示例.我只想让图像一个接一个地连续出现，没有任何触发.我相信这是非常可能的，但不确定实际如何做到这一点.我已经写好了我现在的代码.任何帮助都是最好的！

var western = ["https://cdn1.iconfinder.com/data/icons/logos-brands-in-colors/436/Google_Pay_GPay_Logo-512.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Apple_Pay_logo.svg/2560px-Apple_Pay_logo.svg.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Klarna_Payment_Badge.svg/2560px-Klarna_Payment_Badge.svg.png"];

function getRandomWesternImage() {
  var index = Math.floor(Math.random() * western.length);
  return western[index];
}

$("#western-wrapper").hover(
  function() {
    var image = getRandomWesternImage();
    $("#western").attr("src", image);
    console.log(image);

    for (var i = 0; i < western.length; i++) {
      // create the image element
      var imageElement = document.createElement('img');
      imageElement.setAttribute('src', western[i]);
    }
  });

$("#western-wrapper").mouseout(function() {
  $("#western").attr("src", "https://cdn1.iconfinder.com/data/icons/logos-brands-in-colors/436/Google_Pay_GPay_Logo-512.png");
  console.log(image);
});

.img2 {
  max-width: 110px;
  margin-bottom: 0.1px;
}

<span id="western-wrapper">
       <img id="western" class="img2" src="https://cdn1.iconfinder.com/data/icons/logos-brands-in-colors/436/Google_Pay_GPay_Logo-512.png" />
</span>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>

let imageTimer; function updateImage() { var image = getRandomWesternImage(); $("#western").attr("src", image); console.log(image); for (var i = 0; i < western.length; i++) { // create the image element var imageElement = document.createElement('img'); imageElement.setAttribute('src', western[i]); } imageTimer = setTimeout(updateImage, 5000); } onload = () => { imageTimer = setTimeout(updateImage, 5000); }

let imageTimer, imageIndex = 0; function updateImage() { var image = western[imageIndex]; $("#western").attr("src", image); console.log(image); imageIndex++; imageIndex *= (imageIndex < western.length); // The above line sets imageIndex back to 0 if we reached the end for (var i = 0; i < western.length; i++) { // create the image element var imageElement = document.createElement('img'); imageElement.setAttribute('src', western[i]); } imageTimer = setTimeout(updateImage, 5000); } onload = () => { imageTimer = setTimeout(updateImage, 5000); }

Javascript 在没有任何悬停或其他触发的情况下连续交换图像

推荐答案

Javascript相关问答推荐

RxJS setTimeout操作符等效

是否有方法在OpenWeatherMap API中获取过go 的降水数据？

MongoDB中的引用

微软Edge编辑和重新发送未显示""

使搜索栏更改语言

制作钢琴模拟器，并且在控制台中不会执行或显示该脚本

连接到游戏的玩家不会在浏览器在线游戏中呈现

从页面到应用程序(NextJS)：REST.STATUS不是一个函数

Webpack在导入前混淆文件名

将Node.js包发布到GitHub包-错误ENEEDAUTH

在VS代码上一次设置多个变量格式

为什么云存储中的文件不能公开使用？

自定义图表工具提示以仅显示Y值

Google脚本数组映射函数横向输出

React Refs不与高阶组件(HOC)中的动态生成组件一起工作

react 路由如何使用从加载器返回的数据

bootstrap S JS赢得了REACT中的函数/加载

在范围数组中查找公共(包含)范围

无法在Adyen自定义卡安全字段创建中使用自定义占位符

如何为两条动态路由创建一个页面？