使用Javascript - 切换两个图像

之间，我有以下的Javascript代码应该两幅图像之间进行快速切换：使用Javascript - 切换两个图像

<head runat="server"> 
    <title>Home Page</title> 

    <script src="Resources/jQuery.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     function changeImage() 
     { 
      requestAnimationFrame(changeImage); 

      var url = document.getElementById('Change_Image').src; 

      if (url == 'Resources/Share1.bmp') 
      { 
       document.getElementById('Change_Image').src = 'Resources/Share2.bmp'; 
      } 

      else 
      { 
       if (url == 'Resources/Share2.bmp') 
       { 
        document.getElementById('Change_Image').src = 'Resources/Share1.bmp'; 
       } 
      } 
     }  
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <h1>Welcome to my Website</h1> 
      <h2>Below you can find an example of visual cryptography</h2> 
      <br /> 
      <br /> 
      <div><img id="Change_Image" src="Resources/Share1.bmp" alt="Letter A" /></div> 
     </div> 
    </form> 
</body> 
</html>

不幸的是，代码不工作，图像不改变到另一个。我究竟做错了什么？我对JavaScript非常陌生，请耐心等待？

来源

2013-04-11 Matthew

我刚刚删除了[tag：C＃]标记，因为您根本没有在您的问题中提到C＃，但仅仅是为了安全起见：这与C＃有什么关系？ – Nolonar 2013-04-11 12:37:42

@Nolonar其实它并不需要用C＃。我包含了标签，因为我在使用C＃的ASP.NET中进行编程。 – Matthew 2013-04-11 12:38:48

看到我关于使用jQuery切换的答案，仍然存在一个问题;你什么时候想改变形象？当用户点击图像或每隔几秒钟？ – HMR 2013-04-11 12:55:40

您正在使用赋值运算符而不是比较运算符。在第二种情况下也使用else if或else。

更改为

if (url == 'Resources/Share1.bmp')

和

else if (url == 'Resources/Share2.bmp')

，它应该工作。

看到这个DEMO来帮助你。它以2秒的间隔切换图像

来源

2013-04-11 12:38:46 letiagoalves

感谢您的提示。不幸的是，该程序仍然不会因为某种原因切换图像 – Matthew 2013-04-11 12:40:29

在if语句 – 2013-04-11 12:41:22

@AbhishekDilliwal之间放了一个else。它仍然无法工作。 – Matthew 2013-04-11 12:42:21

您的逻辑似乎有缺陷。看看这段代码

var url = document.getElementById('Change_Image').src; 

      if (url = 'Resources/Share1.bmp') 
      { 
       document.getElementById('Change_Image').src = 'Resources/Share2.bmp'; 
      }

而且您的标记是

<div><img id="Change_Image" src="Resources/Share1.bmp" alt="Letter A" /></div>

网址的价值永远是资源/ Share1.bmp。也正如其他海报提到的平等是==而不是=

来源

2013-04-11 12:44:39

我看到jquery包括，也许mvc appliction？

您可以使用jQuery拨动： http://api.jquery.com/toggle/

您的HTML：

<div class="someContainer"> 
<img class="Change_Image" src="Resources/Share1.bmp" alt="Letter A" /> 
<img class="Change_Image" src="Resources/Share2.bmp" alt="Letter B" style="display:none"/> 
</div>

你的JavaScript：

$(".someContainer").find(".Change_Image").toggle();

你想要一些影响

$(".someContainer").find(".Change_Image").toggle("slow");

来源

2013-04-11 12:50:53 HMR

使用Javascript - 切换两个图像

回答

相关问题