✔ Slideshow in HTML einbinden

Status
Nicht offen für weitere Antworten.
M

Mellowtrax

Mitglied
Hallo zusammen

Ich hab mal eine Frage, und zwar hab ich eine Webseite (nix besonderes. Ein Hintergrundbild, etwas Text und das wars auch schon) Jetzt hab ich etwa 10 Bilder im jpq Format. Nun möchte ich in die bereits vorhandene html Seite eine Art Slideshow einbinden. Dass heisst die 10 Bilder sollen der Reihe nach eingeblendet werden.. Nun weiss ich aber nicht genau wie. Kan mir da jemand helfen?

gruss Mell
 
Hi, das kannst du mit Javascript machen:
zuerst lädst du die Bilder:


Code: 
 <script     language="JavaScript1.1">
  
       var image1=new Image()
       image1.src="image1.gif"
       var image2=new Image()
       image2.src="image2.gif"
       var image3=new Image()
       image3.src="imgage.gif"
statt viele einzelne image Instanzen zu benutzen, kannst du die natürlich auch in einem Array abspeichern..


Nun definierst du dir eine Funktion, die automatisch alle x( bei mir 4) Sekunden das Bild wechselt..
Sollte das letzte Bild angewählt werden, setzt due den counter wieder zurück auf 1:



Code: 
   var nummer=1
   function wechsle(){
  document.images.slideshowBilder.src=eval("image"+nummer+".src")
  
         if (nummer<3)
       nummer++
       else
       nummer=1
  
       setTimeout("wechsle()",4000)
       }
       wechsle()
  </script>
Als letztes bindest du noch den benötigten HTML Code in deine Seite ein:
Code: 
 <img src="image.gif" name="SlideshowBilder">

*grüssle*
MeinerEiner
 
Hmm irgendwie mach ich wohl was falsch... er motzt immer, dass in der Zeile mit dem code
document.images.slideshowBilder.src=eval("image"+nummer+".src")
ein Fehler sei.
Ich hab folgenden Code in meiner HTML Seite:

HTML: 
<html>
<head>
<title>Neue Seite 1</title>
<script	 language="JavaScript1.1">
  
	  var image1=new Image()
	   image1.src="1.jpg"
	   var image2=new Image()
	   image2.src="2.jpg"
	   var image3=new Image()
	   image3.src="3.jpgf"

   var nummer=1
   function wechsle(){
  document.images.slideshowBilder.src=eval("image"+nummer+".src")
  
		 if (nummer<3)
	   nummer++
	   else
	   nummer=1
  
	   setTimeout("wechsle()",4000)
	   }
	   wechsle()
  </script>

<body>
<img src="image.gif" name="SlideshowBilder">
</body>
</html>

Die Bilder liegen im selben Verzeichnis wie die HTMNL Seite...
Ich glaub ich bin ein bisserl zu doof für das *smile*
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück