Question

我必须制作一个能够在打开动画后呈现动画的程序。

这里是我到目前为止的代码，但我不知道如何修复它以自动显示图片，我不允许使用按钮或将鼠标悬停在图像上进行更改，我不允许使用预制的gif或gif

var index = 0;
var ImageList = ["http://www.iconsplace.com/icons/preview/orange/happy-256.png", "http://www.iconsplace.com/icons/preview/orange/sad-256.png"];
var image1 = document.getElementById("myImage");

function onTimer() {
  timerValue++;
  para.innerHTML = timerValue;
  if (timerValue >= 30) {
    img.src("http://www.iconsplace.com/icons/preview/orange/happy-256.png");
  } else if (timer <= 60) {
    img.src("http://www.iconsplace.com/icons/preview/orange/sad-256.png");
  } else {
    img.src("http://www.iconsplace.com/icons/preview/orange/happy-256.png");
  }
}

<img id="myImage" src="http://www.iconsplace.com/icons/preview/orange/happy-256.png" style="width:200px">

Answer 1

您可以使用间隔：

window.onload = function(){
   var index = 0;
   var ImageList = ["Images/happy.png", "Images/sad.png"];
   var image1 = document.getElementById("myImage");
   var a = 0;
   setInterval(function(){
       a++;
       image1.src = ImageList[a % ImageList.length];
      }, 30000);
   }

每30秒更改一次图像。

Answer 2

你有一个数组中的两个图像。用它！

＆＃13;

var index = 0;
var ImageList = ["http://www.iconsplace.com/icons/preview/orange/happy-256.png", "http://www.iconsplace.com/icons/preview/orange/sad-256.png"];

window.onload=function() { // page has finished loading, image is available
  var image1 = document.getElementById("myImage");
  var tId=setInterval(function() {
    index=index==0?1:0; // if 0 then 1 else 0
    // for more images instead use: 
    // index++; if (index>=ImageList.length)index=0;
    image1.src=ImageList[index]; // how to set the image src
  },5000); // every 5 seconds
}

＆＃13;

<img id="myImage" src="http://www.iconsplace.com/icons/preview/orange/happy-256.png" style="width:200px">

＆＃13;

如何在没有按钮或没有悬停按钮的情况下更改页面上的图片

2 个答案: