GIF图像随机变化 [英] GIFs changing randomly
问题描述
我得到的GIF和Javascript的一个问题。我得到了不同的GIF，动画，都是一样的格式，我希望他们能随意改变后，他们播放一次。
我试着用JavaScript来解决这个问题，但我只可以使它与一个确切的时间内做出改变，而不是在每一个GIF动画完成后（他们都在不同的时间整理）工作。
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
＆LT;！ -
变种伊马= [];伊马[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）;
}
// - ＆GT;
＆LT; / SCRIPT＆GT;＆LT; /头＆GT;
＆LT;身体GT;＆LT; IMG ID =wechselSRC =BILDER / bild1.gifBORDER =0ALT =＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
是否有可能使这项工作？如果没有在浏览器中，还能怎么你也许使它工作？
我想重写的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;＆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
＆LT;跨度ID =跨越的风格=背景：黑色;字体 - 家庭：无衬线;字体大小：20像素;字体重量：大胆的;填充：10px的;＆GT;我改变颜色＆LT; / SPAN＆GT; ！\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屋！
