使用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 - 切換兩個圖像

回答

相關問題