Bilder-Fadeshow
Seite 1 von 1
Bilder-Fadeshow
von Mirah Mi Mai 02, 2012 10:21 pm
Wenn man viele Bilder zeigen möchte, sieht das einfache 'Untereinander-Setzen' manchmal langweilig aus.
Eine hübsche Lösung erreicht man zum Beispiel mit JavaScript.
Ich möchte euch hier ein Script zur Verfügung stellen, das aus euren Bildern eine kleine und einfache Bildershow macht.
Ich habe das Script nicht komplett selbst geschrieben, sondern die meisten Teile, die mir am besten gefallen haben, aus bereits vorhandenen, frei nutzbaren Scripts genommen und zu einem neuen zusammen gestückelt.
Ich erhebe also kein Copyright-Anspruch darauf!
bildershow.zip zum Download
Eine hübsche Lösung erreicht man zum Beispiel mit JavaScript.
Ich möchte euch hier ein Script zur Verfügung stellen, das aus euren Bildern eine kleine und einfache Bildershow macht.
Ich habe das Script nicht komplett selbst geschrieben, sondern die meisten Teile, die mir am besten gefallen haben, aus bereits vorhandenen, frei nutzbaren Scripts genommen und zu einem neuen zusammen gestückelt.
Ich erhebe also kein Copyright-Anspruch darauf!
- die Bildershow:
- das Script dazu:
- Code:
<script type="text/javascript" language="JavaScript">
<!--
pic_num = 6; //Anzahl Bilder im Ordner +1
imageArray = new Array();
var intCount = 0;
var hTimer = null;
function init() {
for (i=0; i<pic_num; i++) {
imageArray[i] = new Image();
imageArray[i].src = 'img/pic' + i + '.jpg';
}
document.getElementById("fade").appendChild(imageArray[intCount]);
fadeIn(imageArray[intCount], 0);
}
function fadeIn(element, opac) {
if (opac < 1) {
opac += 0.05;
element.style.opacity = opac;
hTimer = window.setTimeout(function() {fadeIn(element, opac);}, 50); //Geschwindigkeit für's 'einfaden'
}
else {
element.style.opacity = 1;
//hTimer = window.setTimeout(function(){fadeOut(element, 1);}, 50);
fadeOut(element, 3); //Zeit in Sekunden, wie lange das Bild stehen bleiben soll
}
}
function fadeOut(element, opac) {
if (opac > 0) {
opac -= 0.05;
element.style.opacity = opac;
hTimer = window.setTimeout(function() {fadeOut(element, opac);}, 50); //Geschwindigkeit für's 'ausfaden'
}
else {
if (intCount < imageArray.length - 1) {
intCount++;
}
else {
intCount = 0;
}
document.getElementById("fade").replaceChild(imageArray[intCount], element);
fadeIn(imageArray[intCount], 0);
}
}
window.onload = function(){
init();
}
//-->
</script>
- Der HTML-Teil:
- Code:
<div id="fade"></div>
bildershow.zip zum Download
Mirah- Moderator
- Anzahl der Beiträge : 41
Anmeldedatum : 01.04.12
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten|
|
|