Question

此帖子与我之前的帖子有关：GIFs changing randomly

我有3种不同的动画彼此相邻。每一个都由不同的GIF组成，它们在彼此之后随机显示。所以我为此编写了html，但在这种情况下，只有第三个动画发生了变化，其余动画始终保持不变。有什么想法吗？ @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>

Answer 1

您的问题是每次都为window.onload分配一个新功能。

这意味着只有最后一个函数才能“存活”，并且将被执行。

您有两个选择：

使用window.addEventListener('load',function(){ [code] })，重复代码
重写它以处理具有单独间隔的元素数组

最好的选择是第二个。

我在这里重写了它：

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>

再次，使用相同的示例来更改多个元素的颜色。

可以很容易地更改以更改图像。

随机动画改变GIF

1 个答案: