随机动画GIF格式变化(Random Animation changing GIFs)

这个帖子的关注与我以前的帖子： GIF图像随机变化

我旁边有3个彼此不同的动画。每一个由这些后彼此随机所示的GIF不同的。所以我写了这个HTML，但在这种情况下，只有第三个动画的变化，其余始终保持不变。在这个任何想法？ @Ismael米格尔

<!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>

你的问题是， window.onload被赋予了新的功能，每次。

这意味着，只有最后一个函数将“生存”，而将被执行。

你有2种选择：

使用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>

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

这可以很容易地改变，以改变图像。