Question

我创建了一个PHP文件，从MySQL数据库中提取图像，并将其显示为每半秒更新一次的图像序列。因此，每半秒页面都会更新，并且在JavaScript中使用setInterval方法会出现一个新图片。

$(document).ready(function(){
setInterval(function() {
    var myImageElement = document.getElementById('myImage');
    myImageElement.src ='http://145.71.111.87/getImage.php?id='+ counter;
}, 500);});

计数器是每次更改的ID，每次都会获取与此id匹配的图像。我想以与YouTube中的视频类似的方式显示此流，因此我可以停止，播放和移动播放滑块。显然，通过计数器，我们可以在序列的任何位置获得任何图像。

Answer 1

尝试使用button元素，switch，.index()

html

<img id="myImage" src="" />
<button>&leftarrow;</button><button>stop</button><button>start</button><button>&rightarrow;</button><label></label>

JS

$(document).ready(function() {
  var counter = 0, interval, label = $("label")
  , fx = function() {
    interval = setInterval(function() {     
      var myImageElement = document.getElementById("myImage");
      myImageElement.onload = function() {label.html(counter)};
      myImageElement.src = "/path/to/image/getImage.php?id=" + counter;     
      ++counter;
    }, 500);
    };
  fx()
  $("button").click(function() {
    clearInterval(interval);
    switch ($(this).index("button")) {
      case 0: label.html(--counter);break;
      case 1: clearInterval(interval);break;
      case 2: fx();break;
      case 3: label.html(++counter);break;
    };
  })
});

像HTML中的视频一样显示图像流

1 个答案: