Question

我有以下JavaScript / HTML代码：

<head runat="server">
    <title>Home Page</title>
    <script src="Resources/jQuery.js" type="text/javascript"></script>

    <script type="text/javascript">
        function change_image()
        {
            var url = document.getElementById('Change_Image').src;

            if (url == 'http://placehold.it/200x200')
            {
                document.getElementById('Change_Image').src = 'http://placehold.it/100x100';
            }

            else
            {
                document.getElementById('Change_Image').src = 'http://placehold.it/200x200';
            }
        }

        setInterval(change_image, 1000);
    </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="http://placehold.it/200x200" alt="Letter A"/></div>
        </div>
    </form>
</body>
</html>

代码每两秒在两个图像之间切换。图像存储在网上。

现在，在我的项目中，我有一个名为Resources的文件夹，其中包含两个名为Share1.bmp和Share2.bmp的图像。

如果我修改上面的代码来使用这两个图像，那么任何东西都不行了。我就是这样做的：

if (url == '../Resources/Share1.bmp')
            {
                document.getElementById('Change_Image').src = '../Resources/Share2.bmp';
            }

            else
            {
                document.getElementById('Change_Image').src = '../Resources/Share1.bmp';
            }

...
...
<div><img id="Change_Image" src="../Resources/Share1.bmp" alt="Letter A"/></div>

我做错了什么？我是否错误地将网址传递给项目中存储的图片？

修改

使用我的图像时，Share1.bmp会正确显示，但不会切换。似乎问题出在JavaScript中的URL。

Answer 1

使用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：

$(document).ready(function(){
  var toggleImages=function(){
    $(".someContainer").find(".Change_Image").toggle();
    setTimeout(toggleImages,2000);
  }
  toggleImages();
});

要编写自己的toggle实现（仅适用于此特定实例），您可以在包含图像的div之后直接添加此JS：

<div class="someContainer" id="myImageContainer">
 <img src="Resources/Share1.bmp" alt="Letter A" />
 <img src="Resources/Share2.bmp" alt="Letter B" 
   style="display:none"/>
</div>
<script type="text/javascript">
 (function(){
   var images= document.getElementById("someContainer")
     .getElementsByTagName("img")
   ,toggleImages=function(){
     for(var i = 0;i < images.length;i++){
       images[i].style.display=(image.style.display==="none")?
         "":"none";
     }
     setTimeout(toggleImages,2000);
   };
   toggleImages();
 })();
</script>

Answer 2

问题很可能是图像的相对路径。尝试更改路径（删除../):

/Resources/Share2.bmp和/Resources/Share1.bmp

JavaScript - 图像路径

2 个答案: