我有以下 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>
我做错了什么？我是否错误地将 url 传递给了项目中存储的图像？
编辑
使用我的图像时，Share1.bmp 可以正确显示，但不会发生切换。问题似乎出在 JavaScript 中的 URL。
最佳答案
使用 jQuery，您可以将两个图像放在那里并让它们隐藏显示(切换)。
你的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();
});
要编写自己的切换实现(仅适用于此特定实例)，您可以直接在包含图像的 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>
关于JavaScript - 图像路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15950031/