Javascript - 在两个图像之间切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15948938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - Switching Between Two Images
提问by Matthew
I have the following Javascript code which should rapidly switch between two images:
我有以下 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>
Unfortunately, the code does not work and the image does not change to another one. What am I doing wrong? I am quite new to JavaScript so bear with me please?
不幸的是，代码不起作用，图像也不会更改为另一个。我究竟做错了什么？我对 JavaScript 很陌生，请耐心等待？
回答by letiagoalves
You are using assign operatorinstead of comparison operator. Also use else ifor just elsein the second condition.
您正在使用赋值运算符而不是比较运算符。也可以在第二种情况下使用else ifor else。
Change to
改成
if (url == 'Resources/Share1.bmp')
and
和
else if (url == 'Resources/Share2.bmp')
and it should work.
它应该工作。
See this DEMOto help you with. It toggles the image with 2 seconds interval
请参阅此DEMO以帮助您。它以 2 秒的间隔切换图像
回答by Mahesh Guruswamy
Your logic seems to be flawed. Look at this piece of code
你的逻辑好像有问题。看这段代码
var url = document.getElementById('Change_Image').src;
if (url = 'Resources/Share1.bmp')
{
document.getElementById('Change_Image').src = 'Resources/Share2.bmp';
}
And your markup is
你的标记是
<div><img id="Change_Image" src="Resources/Share1.bmp" alt="Letter A" /></div>
The value of url will always be Resources/Share1.bmp. Also as the other posters mentioned equality is == and not =
url 的值将始终为 Resources/Share1.bmp。同样正如其他海报提到的平等是 == 而不是 =
回答by HMR
I see jquery is included, maybe mvc appliction?
我看到包含 jquery，也许是 mvc 应用程序？
You can make use of jquery toggle: http://api.jquery.com/toggle/
您可以使用 jquery 切换：http: //api.jquery.com/toggle/
your html:
你的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>
your javascript:
你的javascript：
$(".someContainer").find(".Change_Image").toggle();
You want some effects
你想要一些效果
$(".someContainer").find(".Change_Image").toggle("slow");
