我创建了一个 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);});
counter 是每次更改的 id,每次都会获取与此 id 匹配的图像。例如,我想以与 YouTube 中的视频类似的方式显示此流,这样我就可以停止、播放和移动播放 slider 。显然,通过计数器我们可以获得序列中任何位置的任何图像。
最佳答案
尝试使用button
元素,switch
,.index()
html
<img id="myImage" src="" />
<button>←</button><button>stop</button><button>start</button><button>→</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;
};
})
});
关于javascript - 显示图像流,如 HTML 中的视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35097336/