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://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<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>
Aucun commentaire:
Enregistrer un commentaire