Javascript - 在两个图像之间切换答案

【问题标题】：Javascript - Switching Between Two ImagesJavascript - 在两个图像之间切换
【发布时间】：2013-04-11 20:57:36
【问题描述】：

我有以下 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 很陌生，所以请多多包涵？

【问题讨论】：

我刚刚删除了 c# 标签，因为您在问题中根本没有提到 C#，但为了安全起见：这与 C# 有什么关系？
@Nolonar 实际上它与 C# 无关。我包含该标签是因为我在使用 C# 的 ASP.NET 中进行编程。
查看我关于使用 jQuery 切换的回答，还有一个问题；你想什么时候改变形象？当用户点击图片时或每隔几秒？

标签： javascript html image

【解决方案1】：

您使用的是 assign operator 而不是 comparison operator。也可以在第二个条件中使用else if 或只使用else。

改成

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

和

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

它应该可以工作。

请参阅此DEMO 以帮助您。它以 2 秒的间隔切换图像

【讨论】：

感谢您的提示。不幸的是，由于某种原因，该程序仍然没有切换图像
在 if 语句之间加一个 else
现在你必须在声明后调用changeImage函数。
我在图像中添加了一个 onclick 事件，以查看是否正在输入函数。我还添加了代码以在函数中创建一个弹出窗口。当我单击图像时，弹出窗口显示得很好。问题在于我更改图像的逻辑
使用 jQuery，它已经包含在您的页面中。这将使编写脚本变得更加容易。

【解决方案2】：

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

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>

url 的值将始终为 Resources/Share1.bmp。同样正如其他海报提到的平等是 == 而不是 =

【讨论】：

【解决方案3】：

我看到 jquery 包含在内，也许是 mvc 应用程序？

您可以使用 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");

【讨论】：