Slideshow mit Fade-Effekt

F

flushbomb

Grünschnabel
hallo..

vorweg möchte ich sagen das ich ein anfänger im programmieren bin..

ich habe mich mal daran versucht eine slideshow zu bauen in der jedes bild erst einfadet dann ausfadet und schliesslich wechselt.

ich wollte es so lösen das ich meine zu slidenden bilder in ein array speichere und dieses mit einer for each schleife durchlaufe.
Bei jedem durchlauf soll das gegenwärtig gelieferte objekt an eine funktion fadeIn() und danach an eine funktion fadeOut() übergeben werden die dann jeweils entweder den opacity wert des bildes mit hilfe der setInterval() Funktion inkremen- bzw. dekrementiert.

Dabei stiess ich also auf folgendes problem: bei jedem schleifendurchlauf finden die funktionsaufrufe von fadeIn() und fadeOut() unmittelbar statt ohne das beide funktionen jeweils komplett ausgeführt wurden... ehe fadeIn() überhaupt fertig ist beginnt schon fadeOut() mit der arbeit...

schliesslich habe ich versucht fadeIn() und fadeOut() neben dem zu fadenden Objekt als Parameter auch noch ein callback zu übergeben welchem ich bei fadeIn() als callback gleich noch fadeOut() übergeben habe... das funktioniert auch..
die for each schleife wartet trotzdem nicht sondern startet einfach schnell die funktion und rattert bis zum ende durch...

wüsste jemand einen lösungsansatz für meine methode? eine möglichkeit das die for each schleife bis zum nächsten durchlauf so lange wartet bis fadeIn() und fadeOut() wirklich fertig sind

hier der code: (init() ist an das onload-event gebunden)

HTML: 
var images;

function init(){
images = new Array();

var pic1 = new Image();
pic1.src = "http://www.tutorials.de/forum/images/pic1.jpg";
var pic2 = new Image();
pic2.src = "http://www.tutorials.de/forum/images/pic2.jpg";
var pic3 = new Image();
pic3.src = "http://www.tutorials.de/forum/images/pic3.jpg";

images.push(pic1);
images.push(pic2);
images.push(pic3);

	for each(var tmp in images){
		document.getElementById("images").appendChild(tmp);
		fadeIn(tmp, function(){
			fadeOut(tmp, function(){
			});
		});
	}
}

function fadeIn(element, callback){
var i = 0;
	var timer = setInterval(function(){
		if(i < 1){
			i += 0.05;
			element.style.opacity = i;
		}
		else{
			clearInterval(timer);
			callback();
		}
	}, 50);
}

function fadeOut(element, callback){
var i = 1.0;
	var timer = setInterval(function(){
		if(i > 0){
			i -= 0.05;
			element.style.opacity = i;
		}
		else{
			clearInterval(timer);
			callback();
		}
	}, 50);
}
 
Zuletzt bearbeitet:
Hi,

zunächst möchte ich dich darum bitten, die Gross- und Kleinschreibung wie in der Netiquette in Punkt 15 zugestimmt, einzuhalten. Besten Dank im Voraus.

Zum Problem
Das Problem besteht darin, dass die Funktion weiterläuft und nicht auf das Ende der Methode setInterval wartet.

Stattdessen musst du die Funktion fadeIn erstmalig anstossen. Von da an wird sie periodisch aufgerufen bis keine Transparenz mehr vorhanden ist. Jetzt kann die fadeOut-Funktion aufgerufen werden.

Diese wird ebenso periodisch abgearbeitet wie zuvor fadeIn. Bei voller Transparenz wird wieder die erste Routine angestossen.

Das wird solange wiederholt, bis das Bildarray durchlaufen wurde, wobei die aktuelle Position in einer globalen Variable gesichert wird.

Beispiel (mit setTimeout als periodische Methode):
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var arrImages = new Array();
var intCount = 0;  // Zählvariable für Bilder intCount={0 .. arrImages.length-1}
var hTimer = null; // Timerhandle

function init(){
  var pic1 = new Image();
  pic1.src = "http://www.tutorials.de/forum/images/pic1.jpg";
  pic1.style.opacity = 0;
  var pic2 = new Image();
  pic2.src = "http://www.tutorials.de/forum/images/pic2.jpg";
  pic2.style.opacity = 0;
  var pic3 = new Image();
  pic3.src = "http://www.tutorials.de/forum/images/pic3.jpg";
  pic3.style.opacity = 0;

  arrImages.push(pic1);
  arrImages.push(pic2);
  arrImages.push(pic3);

  document.getElementById("images_id").appendChild(arrImages[intCount]);

  fadeIn(arrImages[intCount], 0);
}

function fadeIn(element, opac){
  if(opac < 1){
    opac += 0.05;
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeIn(element, opac);},50);
  }
  else{
    element.style.opacity = 1;
    // Fadeout-Funktion für aktuelles Bild aufrufen
    //hTimer = window.setTimeout(function(){fadeOut(element, 1);}, 50);
    fadeOut(element, 1);
  }
}

function fadeOut(element, opac){
  if(opac > 0){
    opac -= 0.05;
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeOut(element, opac);},50);
  }
  else{
    // Solange noch nicht alle Bilder gefadet wurden
    if(intCount<arrImages.length-1){
      intCount++;
      document.getElementById("images_id").replaceChild(arrImages[intCount], element);
      fadeIn(arrImages[intCount], 0);
    }
  }
}

window.onload = function(){
  init();
}
 //-->
</script>
</head>
<body>
<div id="images_id"></div>
</body>
</html>

Ciao
Quaese
 
Hallo,

habe mir das Script mal hier angesehen und finde das es super ist.
Nun hab ich, da ich leider mit Javascript keine Erfahrung habe, noch Fragen.

Kann man das ganze auch so steuern das die Tranzparenz als Endlosschleife funktioniert?


Danke

lordofscotland
 
Hi,

es sollte reichen, wenn du in der fadeout-Routine die Zählvariable wieder auf Null setzt, wenn das Ende des Bilderarrays erreicht wurde.
Code: 
function fadeOut(element, opac){
  if(opac > 0){
    opac -= 0.05;
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeOut(element, opac);},50);
  }
  else{
    // Solange noch nicht alle Bilder gefadet wurden
    if(intCount<arrImages.length-1)
      intCount++;
    else
      intCount=0;

    document.getElementById("images_id").replaceChild(arrImages[intCount], element);
    fadeIn(arrImages[intCount], 0);
  }
}

Ciao
Quaese
 
Hi,

so trifft man sich wieder ;-)

Wenn das Script crossbrowserfähig gemacht wird, dann richtig:
Code: 
function fadeIn(element, opac){
  if(opac < 1){
    opac += 0.05;
    // IE
    element.style.filter = "alpha(opacity="+parseInt(opac*100)+")";
    // Safari<1.2, Konqueror
    element.style.KHTMLOpacity = opac;
    // Older Mozilla and Firefox
    element.style.MozOpacity = opac;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeIn(element, opac);},50);
  }
  else{
    element.style.opacity = 1;
    // Fadeout-Funktion für aktuelles Bild aufrufen
    //hTimer = window.setTimeout(function(){fadeOut(element, 1);}, 50);
    fadeOut(element, 1);
  }
}

function fadeOut(element, opac){
  if(opac > 0){
    opac -= 0.05;
    // IE
    element.style.filter = "alpha(opacity="+parseInt(opac*100)+")";
    // Safari<1.2, Konqueror
    element.style.KHTMLOpacity = opac;
    // Older Mozilla and Firefox
    element.style.MozOpacity = opac;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeOut(element, opac);},50);
  }
  else{
    // Solange noch nicht alle Bilder gefadet wurden
    if(intCount<arrImages.length-1)
      intCount++;
    else
      intCount=0;

    document.getElementById("images_id").replaceChild(arrImages[intCount], element);
    fadeIn(arrImages[intCount], 0);
  }
}

Ciao
Quaese
 
Hi,
wie kann man die Bilder anklickbar machen bzw. mit einem Link versehen.

und meine zweite Frage, wie kann man die Bilder eine gewisse zeit anzeigen also zwischen fadin und fade out einen timeout das der Benutzer sich auch das Bild ansehen kann?


Wäre genial wenn ihr die 2 Punkte noch hinbekommt.

LG
reacend
 
Hi,

du könntest die Bild-Objekte um einige Eigenschaften erweitern:
- Link-Adresse
- style für Rahmen

Weiterhin erstellst du ein Ankerelement, in das die Bildobjekte eingehängt werden. Das Ankerelement selbst wird in das Zielelement eingehängt.

Ist nun ein Fade-Durchgang erreicht, werden Bildobjekt und Link-Adresse geändert.

Das längere Anzeigen eines Bildes nach dessen Einfaden kann über ein zeitverzögertes Aufrufen (setTimeout) der Funktion realisiert werden. Über die Variable intDelay kann die Anzahl der Sekunden angegeben werden, die ein Bild angezeigt werden soll, ehe es wieder ausgefadet wird.

Alles Weitere kann den Kommentaren im Script entnommen werden.
Code: 
var arrImages = new Array();
var intDelay = 1;    // Anzahl Sekunden, die ein Bild angezeigt werden soll, bis es wieder ausgefadet wird
var intCount = 0;    // Zählvariable für Bilder intCount={0 .. arrImages.length-1}
var hTimer = null;   // Timerhandle
var objAncor = null; // Referenz für Anker-Element

function init(){
  var pic1 = new Image();
  pic1.src = "bild1.gif";
  pic1.style.opacity = 0;
  pic1.style.border = "0 none";
  pic1.lnk = "http://www.tutorials.de/";
  var pic2 = new Image();
  pic2.src = "bild2.gif";
  pic2.style.opacity = 0;
  pic2.style.border = "0 none";
  pic2.lnk = "http://www.canvas.quaese.de/";
  var pic3 = new Image();
  pic3.src = "bild3.gif";
  pic3.style.opacity = 0;
  pic3.style.border = "0 none";
  pic3.lnk = "http://www.quaese.de/";

  arrImages.push(pic1);
  arrImages.push(pic2);
  arrImages.push(pic3);

  // Anker-Element erstellen und in Zielelement einhängen
  objAncor = document.createElement("a");
  document.getElementById("images_id").appendChild(objAncor);
  // Link-Adresse eintragen
  objAncor.href = arrImages[intCount].lnk;
  objAncor.style.border = "none";
  // Bild in Anker einhängen
  objAncor.appendChild(arrImages[intCount]);

  //document.getElementById("images_id").appendChild(arrImages[intCount]);

  fadeIn(arrImages[intCount], 0);
}

function fadeIn(element, opac){
  if(opac < 1){
    opac += 0.05;
    // IE
    element.style.filter = "alpha(opacity="+parseInt(opac*100)+")";
    // Safari<1.2, Konqueror
    element.style.KHTMLOpacity = opac;
    // Older Mozilla and Firefox
    element.style.MozOpacity = opac;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeIn(element, opac);},50);
  }
  else{
    element.style.opacity = 1;
    // Fadeout-Funktion für aktuelles Bild aufrufen
    hTimer = window.setTimeout(function(){fadeOut(element, 1);}, intDelay*1000);
  }
}

function fadeOut(element, opac){
  if(opac > 0){
    opac -= 0.05;
    // IE
    element.style.filter = "alpha(opacity="+parseInt(opac*100)+")";
    // Safari<1.2, Konqueror
    element.style.KHTMLOpacity = opac;
    // Older Mozilla and Firefox
    element.style.MozOpacity = opac;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeOut(element, opac);},50);
  }
  else{
    // Solange noch nicht alle Bilder gefadet wurden
    if(intCount<arrImages.length-1)
      intCount++;
    else
      intCount=0;

    // Link-Adresse ändern
    objAncor.href = arrImages[intCount].lnk;
    // Nächstes Bild in Anker einhängen
    objAncor.replaceChild(arrImages[intCount], element);
    // Einfaden
    fadeIn(arrImages[intCount], 0);
  }
}
Ciao
Quaese
 
Schon mal vorweg: Geniales, verständliches Script!
Mich würde aber noch interessieren, wie man es anstellt, dass die fading-Farbe nicht schwarz, sondern weiß ist...

Lg
P.M.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück