Slideshow mit Fade-Effekt @ tutorials.de: Tutorials, Forum & Hilfe

flushbomb · 15.12.09 14:26

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-Code:

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);
}

**Quaese** · 17.12.09 18:35

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

lordofscotland · 12.03.10 11:44

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

**Quaese** · 12.03.10 12:47

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

rh-balingen · 13.07.10 10:02

Prima Script!

Nur - wie macht man es auch für den IE fit?

( -: roland :- )

**Quaese** · 13.07.10 14:14

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

reacend · 03.09.10 09:28

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

**Quaese** · 03.09.10 20:31

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

Philip März · 22.02.12 14:06

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.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Slideshow mit fade-Effekt

Gruppenfoto Mit Fade Effekt

Fade-Effekt!

Fade-Effekt für VideoMach

fade effekt

E-Mail:

Abonnieren Abbestellen