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

标签 javascript jquery html

我当前目录中有很多图像文件,例如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/

相关文章:

Css/HTML5 - 需要帮助让 youtube 弹出窗口出现使用 fancybox2

html - 使 HTML 正文背景图像透明

javascript - 将参数传递给模块的匿名函数

javascript - 互斥选择框

javascript - 在 sap -select 中显示数组项目并向项目添加 anchor 标记

javascript - 如何在 netbeans jsp 应用程序中设置浏览器兼容性

jquery - 使用 jQuery 的 AJAX 单选按钮

jquery - 如何在html中重置文件控件的值

javascript - jstree 插件和 stopPropagation 问题

JavaScript for..in 和 enum 奇怪的行为