hi leute!
ich hab da so ein skript mit denen ich hintergrundbilder am iphone automatisch überblenden lassen will..
<?xml version="1.0" encoding="UTF-16"?>
<html><head>
<base href="Private/"/>
<!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->
<meta http
-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: black;
margin: 0;
padding: 20px 0 0 0;
height: 442px;
width: 320px;
}
img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
position: absolute;
width: 320px;
height: auto;
}
img.fade-out {
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head><body style="color: black">
<img id="one"/>
<img id="two"/>
<script>
var images = ['Plant.png', 'Rock.png'];
var index = 0;
var fade_in = one;
var fade_out = two;
fade_in.src = images[0];
fade_out.src = images[images.length - 1];
var fade = function () {
fade_in.src = images[index];
index = (index + 1) % images.length;
fade_in.className = 'fade-out';
fade_out.className = 'fade-in';
var fade_tmp = fade_in;
fade_in = fade_out;
fade_out = fade_tmp;
setTimeout(fade, 15000);
};
fade();
</script>
</body></html>
das skript funktioniert auch ganz gut aber nur mit zwei bildern.. ich möchte aber gerne mehrere bilder verwenden.
wenn ich nun in der zeile
var images = ['Plant.png', 'Rock.png'];
einfach bilder hinten dazuschreibe werden die zwar eingeblendet, aber bei jedem übergang erscheint am anfang ein anderes bild das nicht dazupasst...
kann mir wer helfen einen flüssigen übergang für ca 5-8 bilder zu schaffen???
glg Lintsch
ich hab da so ein skript mit denen ich hintergrundbilder am iphone automatisch überblenden lassen will..
<?xml version="1.0" encoding="UTF-16"?>
<html><head>
<base href="Private/"/>
<!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->
<meta http
-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: black;
margin: 0;
padding: 20px 0 0 0;
height: 442px;
width: 320px;
}
img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
position: absolute;
width: 320px;
height: auto;
}
img.fade-out {
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head><body style="color: black">
<img id="one"/>
<img id="two"/>
<script>
var images = ['Plant.png', 'Rock.png'];
var index = 0;
var fade_in = one;
var fade_out = two;
fade_in.src = images[0];
fade_out.src = images[images.length - 1];
var fade = function () {
fade_in.src = images[index];
index = (index + 1) % images.length;
fade_in.className = 'fade-out';
fade_out.className = 'fade-in';
var fade_tmp = fade_in;
fade_in = fade_out;
fade_out = fade_tmp;
setTimeout(fade, 15000);
};
fade();
</script>
</body></html>
das skript funktioniert auch ganz gut aber nur mit zwei bildern.. ich möchte aber gerne mehrere bilder verwenden.
wenn ich nun in der zeile
var images = ['Plant.png', 'Rock.png'];
einfach bilder hinten dazuschreibe werden die zwar eingeblendet, aber bei jedem übergang erscheint am anfang ein anderes bild das nicht dazupasst...
kann mir wer helfen einen flüssigen übergang für ca 5-8 bilder zu schaffen???
glg Lintsch
