GIF图像随机变化 [英] GIFs changing randomly
问题描述
我得到的GIF和Javascript的一个问题。我得到了不同的GIF,动画,都是一样的格式,我希望他们能随意改变后,他们播放一次。
我试着用JavaScript来解决这个问题,但我只可以使它与一个确切的时间内做出改变,而不是在每一个GIF动画完成后(他们都在不同的时间整理)工作。
< HTML和GT;
< HEAD>
<脚本类型=文/ JavaScript的>
<! -
变种伊马= [];伊马[0] ='BILDER / bild1.gif';
伊马[1] ='BILDER / bild2.gif';
伊马[2] ='BILDER / bild3.gif';
伊马[3] ='BILDER / bild4.gif';功能BildWechsel()
{
VAR NUM =的Math.random();
VAR RAN = Math.floor((ima.length - 1)* NUM); document.images ['wechsel'] SRC = IMA [RAN]。
}的onload =功能()
{
window.setInterval(函数(){BildWechsel();},10000);
}
// - >
< / SCRIPT>< /头>
<身体GT;< IMG ID =wechselSRC =BILDER / bild1.gifBORDER =0ALT =>< /身体GT;
< / HTML>
是否有可能使这项工作?如果没有在浏览器中,还能怎么你也许使它工作?
我想重写的Javascript是这样的:
的window.onload =函数(){ VAR图像= [
{SRC:BILDER / bild1.gif',延时:3000},
{SRC:BILDER / bild2.gif',延时:2000},
{SRC:BILDER / bild3.gif',延时:1500},
{SRC:BILDER / bild4.gif',延时:4000}
]
元素= document.images ['wechsel'],
change_image =功能(){
VAR图像=图像[Math.floor(的Math.random()* images.length)];
//(的Math.random()* images.length)GT;> 0会快很多 element.src = image.src; 的setTimeout(change_image,image.delay);
}; 的setTimeout(change_image,10000);};
的延迟
将根据您目前的形象改变。
这有一些速度提升和code是因为它可以得到的那样简单。
这是未经测试!
下面是一个(略)版本改为更改文本颜色:
的window.onload =函数(){\r
\r
VAR颜色= [\r
{名称:'红',延时:3000},\r
{名称:'黄',延时:1000},\r
{名:绿色,延时:2300},\r
{名称:'蓝',延时:2600},\r
{名称:'粉红',延时:1300},\r
{名称:'紫',延迟:500},\r
]\r
元素=的document.getElementById('跨'),\r
change_color =功能(){\r
变种颜色=颜色[(的Math.random()* colors.length)GT;大于0];\r
\r
element.style.color = color.name;\r
\r
的setTimeout(change_color,color.delay);\r
};\r
\r
的setTimeout(change_color,2000年);\r
\r
};
\r
<跨度ID =跨越的风格=背景:黑色;字体 - 家庭:无衬线;字体大小:20像素;字体重量:大胆的;填充:10px的;>我改变颜色< / SPAN>
!\r
I got a problem with GIFs and Javascript. I got different GIF-animations which are all the same format and I want them to change randomly after they are played one time.
I tried to solve this with Javascript but I only could make it work with an exact time to make the change and not when each GIF-animation is finished (they are all finishing at different times).
<html>
<head>
<script type="text/javascript">
<!--
var ima = [];
ima[0] = 'bilder/bild1.gif';
ima[1] = 'bilder/bild2.gif';
ima[2] = 'bilder/bild3.gif';
ima[3] = 'bilder/bild4.gif';
function BildWechsel()
{
var num = Math.random();
var ran = Math.floor((ima.length - 1) * num);
document.images['wechsel'].src = ima[ran];
}
onload = function ()
{
window.setInterval(function () { BildWechsel(); }, 10000);
}
//-->
</script>
</head>
<body>
<img id="wechsel" src="bilder/bild1.gif" border="0" alt="">
</body>
</html>
Is there any possibility to make this work? And if not in a browser, how else can you maybe make it work?
I would rewrite the Javascript like this:
window.onload = function () {
var images = [
{src:'bilder/bild1.gif',delay:3000},
{src:'bilder/bild2.gif',delay:2000},
{src:'bilder/bild3.gif',delay:1500},
{src:'bilder/bild4.gif',delay:4000}
],
element = document.images['wechsel'],
change_image = function () {
var image = images[ Math.floor( Math.random() * images.length ) ];
// (Math.random()*images.length)>>0 would be a lot faster
element.src = image.src;
setTimeout(change_image, image.delay);
};
setTimeout(change_image, 10000);
};
The delay
would change based on the image you currently have.
This has a few speed improvements and the code is as simple as it can get.
This was untested!
Here is a (slightly) changed version to change the text color:
window.onload = function () {
var colors = [
{name:'red',delay:3000},
{name:'yellow',delay:1000},
{name:'green',delay:2300},
{name:'blue',delay:2600},
{name:'pink',delay:1300},
{name:'purple',delay:500},
],
element = document.getElementById('span'),
change_color = function () {
var color = colors[ ( Math.random() * colors.length )>>0 ];
element.style.color = color.name;
setTimeout(change_color, color.delay);
};
setTimeout(change_color, 2000);
};
<span id="span" style="background:black;font-family:sans-serif;font-size:20px;font-weight:bold;padding:10px;">I change color!</span>
这篇关于GIF图像随机变化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!