Question

我有以下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很陌生，请耐心等待我？

Answer 1

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

更改为

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

和

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

它应该有用。

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

Answer 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。另外正如其他海报提到的那样，等式是==而不是=

Answer 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");

Javascript - 在两个图像之间切换

3 个答案: