我当前目录中有很多图像文件,例如step_graph0.png,step_graph1.png, step_graph2.png , step_graph3.png
等等。
我的目标是能够使用一个网页将它们一一显示。我创建了两个链接,下一个和上一个,并添加了 onclick
方法,以便它更改 image.src 属性。代码如下
<html>
<head>
<script type="text/javascript">
window.onload =function f() {
f.me = f.me || 0;
//alert(f.me);
var p =document.getElementById("previous");
var n =document.getElementById("next");
var image = document.getElementById("graph");
alert(f.me);
p.onclick = function(){
f.me = f.me|| 0;
if( f.me > 0 ) f.me--;
image.src = "step_graph"+(parseInt(f.me) ) + ".png";
//window.location.reload();
}
n.onclick = function(){
f.me = ++f.me || 0;
image.src = "step_graph"+(parseInt(f.me) )+".png";
//window.location.reload();
}
}
</script>
</head>
<body>
<a id="previous" href="">step_back</a> <a id="next" href="">step_forward</a><br>
<center>
<img id="graph" src ="step_graph1.png" ></img></center>
code<br>
output<br>
</body>
</html>
我将此文件保存为index.html,与图像位于同一目录中。最初,它显示图像。但是,当我单击下一个和上一个链接时,它会显示所需的图像,但在几毫秒内,它就会返回到原始图像。我使用f.me作为静态变量来保存图像文件索引,例如0, 1 , 2 , 3
在文件名中step_graph0.png, step_graph1.png, step_graph2.png
等等
我试了一个小时。我认为这是关于 window.onload
功能重置一切。但这只是为了满足自己的疯狂猜测。
任何人都可以找出代码中的错误,请这样做。
最佳答案
var me = me || 0;
//alert(f.me);
var p = document.getElementById("previous");
var n = document.getElementById("next");
var image = document.getElementById("graph");
$('#previous').on('click', function(e) {
$('#try').html('prev');
e.preventDefault();
me = me || 0;
if (me > 0) me--;
image.src = "http://home.iitk.ac.in/~amitkum/images/" + (parseInt(me)) + ".jpg";
//window.location.reload();
});
n.onclick = function(e) {
e.preventDefault();
me = ++me || 0;
image.src = "http://home.iitk.ac.in/~amitkum/images/" + (parseInt(me)) + ".jpg";
//window.location.reload();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body> <a id="previous" href="#">step_back</a> <a id="next" href="#">step_forward</a>
<br>
<br>
<img id="graph" src="http://home.iitk.ac.in/~amitkum/images/2.jpg" height="100"></img>
<div id="try">jk</div>
关于javascript - 网页中的图像出现一小段时间然后消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26562132/