将多个帧图透过document.setInterval()方法实现类似gif的动态图显示 刚刚学习js
日期：2014-05-16 浏览次数：20385 次
将多个帧图通过document.setInterval()方法实现类似gif的动态图显示 刚刚学习js
预加载图片不会用alert(document.images.length)的值总是1
是不是需要我在前面实例化所有图片？var img=new Image();
比如：
img0.src="0.jpg";
img1.src="1.jpg";
img2.src="2.jpg";
img3.src="3.jpg";
...
img149.src="149.jpg";
这样在最后的document.images.length的时候才会是150？
------解决方案--------------------
其实window.setInterval可以直接写成setInterval，而且各大主流浏览器都兼容的。
我以前写过一个类似的，代码如下：
预加载图片不会用alert(document.images.length)的值总是1
是不是需要我在前面实例化所有图片？var img=new Image();
比如：
img0.src="0.jpg";
img1.src="1.jpg";
img2.src="2.jpg";
img3.src="3.jpg";
...
img149.src="149.jpg";
这样在最后的document.images.length的时候才会是150？
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body onload="start()">
<img src="" name="im"/>
<script>
var imgsrc;
var i = 0, gw = 0, sw = 0, bw = 0;
function start() {
window.setInterval(a, 100);
}
function a() {
imgsrc = "IMG00" + bw + "" + sw + "" + gw + ".bmp";
gw++;
if (gw >= 9) {
gw = 0;
sw++;
if (sw >= 9) {
sw = 0;
bw++;
}
}
if(bw+""+ sw+""+gw =="150"){
gw = 0, sw = 0, bw = 0;
}
document.images.im.src = imgsrc;
}
</script>
</body>
</html>
------解决方案--------------------
其实window.setInterval可以直接写成setInterval，而且各大主流浏览器都兼容的。
我以前写过一个类似的，代码如下：
<html>
<head>
<script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var imgIndex = 0;
var timer = 150;
var imgObj;
var img1 = "./01.png";
var img2 = "./02.png";
var img3 = "./03.png";
var img4 = "./01.png";
var imgArr = [img1, img2, img3, img4];
window.onload = function(){
imgObj = document.getElementById("img");
setInterval(onframe, timer);
}
function onframe() {
if(imgIndex >= imgArr.length-1){
imgIndex = 0;
}else{
imgIndex ++;
}
imgObj.src = imgArr[imgIndex];
}
</script>
</head>
<body>
<img id="img" style="margin:50px 0 0 50px;" />
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
