随机动画更改GIF [英] Random Animation changing GIFs
本文介绍了随机动画更改GIF的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这篇文章涉及我以前的文章： GIF随机变化
我有3个不同的动画相邻。每一个都由不同的GIF组成，这些GIF是相互随机显示的。所以我为此写了html，但在这种情况下，只有第三个动画发生变化，其余动画始终保持不变。对此有何想法？ @Ismael Miguel
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp ：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< title>< / title>
< link href =styles / styles.css =stylesheettype =text / css/>
< script type =text / javascript>
<！ -
window.onload = function（）{
var images = [
{src：'bilder / 1 / 1.gif'，延迟：3500}，
{src：'bilder / 1 / 2.gif'，延迟：1400}，
{src：'bilder / 1 / 3.gif'，延迟：4000}，
]，
element = document.images ['wechsel1']，
change_image = function（）{
var image = images [Math.floor（Math.random（）* images 。长度 ） ];
//（Math.random（）* images.length）>> 0会快很多
element.src = image.src;
setTimeout（change_image，image.delay）;
};
setTimeout（change_image）;
};
// - >
<！ -
window.onload = function（）{
var images = [
{src：'bilder / 2/1 .gif'，delay：1800}，
{src：'bilder / 2 / 2.gif'，delay：1800}，
{src：'bilder / 2 / 3.gif'，delay： 1800}，
]，
element = document.images ['wechsel2']，
change_image = function（）{
var image = images [Math.floor（Math.random （）* images.length）];
//（Math.random（）* images.length）>> 0会快很多
element.src = image.src;
setTimeout（change_image，image.delay）;
};
setTimeout（change_image）;
};
// - >
<！ -
window.onload = function（）{
var images = [
{src：'bilder / 3/1 .gif'，delay：4300}，
{src：'bilder / 3 / 2.gif'，delay：3100}，
{src：'bilder / 3 / 3.gif'，delay： 4100}，
]，
element = document.images ['wechsel3']，
change_image = function（）{
var image = images [Math.floor（Math.random （）* images.length）];
//（Math.random（）* images.length）>> 0会快很多
element.src = image.src;
setTimeout（change_image，image.delay）;
};
setTimeout（change_image）;
};
// - >
< / script>
< / head>
< body>
< div class =center>
< div class =item top>
< img id =wechsel1src =bilder / 1 / 1.gifwidth =568height =800border =0alt =>
< / div>
< div class =item>
< img id =wechsel2src =bilder / 2 / 1.gifwidth =568height =800border =0alt =>
< / div>
< div class =item bottom>
< img id =wechsel3src =bilder / 3 / 1.gifwidth =568height =800border =0alt =>
< / div>
< / div>
< / body>
< / html>
解决方案
您的问题在于 window.onload 每次都被分配一个新函数。
这意味着只有最后一个函数会'生存'，并且会被执行。
您有2个选项：
窗口.addEventListener（'load'，function（）{[code]}），带重复代码
最好的选择是第二个。
在这里重写它：
名称： '黄'，延时：1000}，{名称： '绿色'，延迟：2300}，{名称： '蓝'，延时：2600}，{名称： '粉红'，延时：1300}，{名称： PUR （Math.random（）* colors.length），这个数组就是这个数组的一部分， > 0]; element.style.color = color.name; setTimeout（function（）{change_color（element）;}，color.delay）; }; for（var i = 0，l = elements.length; i <1; i ++）{change_color（elements [i]）; }};
< span style =background：black ; font-family：sans-serif; font-size：20px; font-weight：bold; padding：10px;> I change color！< / span>< br>< br>< br><< ;！ - 错误的html！ - >< span style =background：black; font-family：sans-serif; font-size：20px; font-weight：bold; padding：10px;>我也改变！< / span> < br>< br>< br>< span style =background：black; font-family：sans-serif; font-size：20px; font-weight：bold; padding：10px;> Look < / span>
同样的例子来改变多个元素的颜色。
这可以很容易地改变，以改变图像。
This post concerns with my previous post: GIFs changing randomly
I have 3 different animations next to each other. Each one consist of different gifs which are shown randomly after each other. So I wrote the html for this, but in this case only the third animation changes and the rest always stays the same. Any idea on this? @Ismael Miguel
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
window.onload = function () {
var images = [
{src:'bilder/1/1.gif',delay:3500},
{src:'bilder/1/2.gif',delay:1400},
{src:'bilder/1/3.gif',delay:4000},
],
element = document.images['wechsel1'],
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);
};
//-->
<!--
window.onload = function () {
var images = [
{src:'bilder/2/1.gif',delay:1800},
{src:'bilder/2/2.gif',delay:1800},
{src:'bilder/2/3.gif',delay:1800},
],
element = document.images['wechsel2'],
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);
};
//-->
<!--
window.onload = function () {
var images = [
{src:'bilder/3/1.gif',delay:4300},
{src:'bilder/3/2.gif',delay:3100},
{src:'bilder/3/3.gif',delay:4100},
],
element = document.images['wechsel3'],
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);
};
//-->
</script>
</head>
<body>
<div class="center">
<div class="item top">
<img id="wechsel1" src="bilder/1/1.gif" width="568" height="800" border="0" alt="">
</div>
<div class="item">
<img id="wechsel2" src="bilder/2/1.gif" width="568" height="800" border="0" alt="">
</div>
<div class="item bottom">
<img id="wechsel3" src="bilder/3/1.gif" width="568" height="800" border="0" alt="">
</div>
</div>
</body>
</html>
解决方案
Your problem is that the window.onload is being assigned a new function everytime.
This means that only the last function will 'survive', and will be executed.
You have 2 options:
- Use
window.addEventListener('load',function(){ [code] }), with repeated code - Rewrite it to handle an array of elements, with individual intervals
The best option is the 2nd one.
And I've rewritten it here:
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},
],
elements = document.getElementsByTagName('span'), //the array is here
change_color = function ( element ) {
var color = colors[ ( Math.random() * colors.length )>>0 ];
element.style.color = color.name;
setTimeout(function(){
change_color(element);
}, color.delay);
};
for(var i=0, l=elements.length; i<l; i++)
{
change_color(elements[i]);
}
};
<span style="background:black;font-family:sans-serif;font-size:20px;font-weight:bold;padding:10px;">I change color!</span>
<br><br><br><!-- bad html! -->
<span style="background:black;font-family:sans-serif;font-size:20px;font-weight:bold;padding:10px;">I change too!</span>
<br><br><br>
<span style="background:black;font-family:sans-serif;font-size:20px;font-weight:bold;padding:10px;">Look at me!</span>
This, again, using the same example to change the color of multiple elements.
This can be very easily changed to change the images.
这篇关于随机动画更改GIF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
