网页中的图像会出现一小段时间，然后消失

Image in webpage appear for a short period and then disappear

本文关键字：时间 小段 然后 消失 图像 网页      更新时间：2023-09-26

我在当前目录中有许多图像文件，如step_graph0.png,step_graph1.png, step_graph2.png , step_graph3.png等。

我的目标是能够使用一个网页来逐一显示它们。我创建了两个链接，next和previor，并向它们添加了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作为静态变量来保存图像文件索引，例如文件名step_graph0.png, step_graph1.png, step_graph2.png等中的0, 1 , 2 , 3。

我试了一个小时。我认为这是关于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>

相关文章：