JavaScript - 切换两张图片

Question

JavaScript - 切换两张图片

4

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

- Matthew

我刚刚删除了[tag:C#]标签，因为你在问题中根本没有提到C#，但为了安全起见：这与C#有什么关系？ - Nolonar

@Nolonar 嗯，实际上这与C#无关。我加了这个标签是因为我在编写ASP.NET程序，而ASP.NET使用了C#语言。 - Matthew

关于使用jQuery toggle的问题，可以看看我的答案；但还有一个问题：您想在什么时候更改图像？当用户单击图像时还是每隔几秒钟？ - HMR

3个回答

0

你的逻辑似乎有问题。看看这段代码。

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。另外，正如其他帖子中提到的，相等性是==而不是=。

- Mahesh Guruswamy

0

我看到jQuery被引用了，可能是MVC应用程序吗？

你可以使用jQuery的toggle方法： 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");

- HMR

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- letiagoalves · Accepted Answer

您使用了“赋值运算符”而非“比较运算符”。同时在第二个条件中，请使用“else if”或者只使用“else”。请改为：

修改后：

您正在使用 赋值运算符 而不是 比较运算符 。同时在第二个条件中，请使用 else if 或者只使用 else 。

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

并且

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

希望它能够正常工作。

查看此演示以帮助您。它在2秒间隔内切换图像