Question

我有一个包含一个图像对象的html页面。

我正在尝试编写一些JavaScript，但脚本中没有工作。我有一段脚本读取变量，如果变量'e'等于1，则会出现一个图像。如果'e'是任何其他数字，则显示图像2。现在，'e'是静态的，但它将是动态的。

如何根据变量动态更改图像？

非常感谢任何帮助。

    <!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Title of the document</title>
   <body onload="changei()">
      <img id="im1" src="Images/lion1.jpg" width="100" height="180" style="display:show"> 
      <p> hello</p>
      <script>
         function changei() {
         var e = 0;
         changei(e);
         // something  changed e in e = 0;
         change(e);

         function changei(e) {
         var loc = '';
         if (image.src.match("lion1")) {
         image.src = "Images/lion1.jpg";
         } else {
         image.src = "Images/lion2.jpg";
         }
         $('#im1').attr("src",loc); // change image source
         }

      </script>
   </body>
</html>

Answer 1

您可以使用jQuery更改图像来源。你的函数里面有e，传递作为参数，你可以通过调用具有相应值的函数来改变你想要的图像。

var e = 1;
changei(e);
// something  changed e in e = 0;
changei(e);

function changei(e) {
  var loc = '';
  if (e==1) {
       loc = "Images/lion1.jpg";
  } else {
       loc = "Images/lion2.jpg";
  }
  $('#im1').attr("src",loc); // change image source
}

示例：您可以将事件附加到输入keyup，每次按下input中的某个键时，图像都会根据您输入的内容而改变。

changei(1); // when entering in page set src

$('#eInput').keyup(function(){ // when something was inserted on input
    var e = $(this).val();
    changei(e);
});

function changei(e) {
  var loc = '';
  if (e==1) {
       loc = "http://images.math.cnrs.fr/local/cache-vignettes/L256xH256/section1-original-0f409.png";
  } else {
       loc = "http://www.data-compression.com/baboon_24bpp.gif";
  }
  $('#im1').attr("src",loc); // change image source
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="eInput" />
<img id="im1" src="Images/lion1.jpg" style="display:show">

Answer 2

你可以做两件事：

您将在某个函数中更改变量e的值，然后只需创建一个函数来更改图像，如下所示并调用它。
```
function changeImg(e){
if(e==1)
    //your code for image 1
else
   //code for image 2
}
```

更改e后立即调用此功能。

使用setInterval()功能。 e.g。

setInterval(5000,function(){
changeImg(e);
});

尽管如此，您应该记住，您需要为案例2

e

变量更改时的图像交换

2 个答案: