• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Einfache Slideshow erstellen

J

Jjaxi

Neues Mitglied
Hallo liebes Forum,

wie läßt sich eine einfache Slideshow erstellen. Habe schon viele Beispiele probiert, aber es funktioniert nicht.

Liebe Grüße
Jaxi
 
Da hast du dir die einfachste Variante ausgesucht.
Wenn du den Code Kopierst und in einer html Datei Speicherst sollte es so auch laufen
hier der Code.
Code: 
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

 <script>
 var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
 </script>
</body>
</html>
 
Es waere schoen, wenn man aus Verzeichnisse und Unterverzeichnisse auslesen kann. Diese einfache Loesung entspricht meine Beduerfnisse.Jedoch habe ich kein Lust fuer mehrere hundert photos, deren Location einzutragen
 
das geht auch. Aber dazu brauchst du Php.
Php liest dann dein Verzeichniss aus und dann kann man das auch nutzen ohne das du die Links eintragen mußt. Das gute daran ist wenn du neue Fotos in das Verzeichniss kopierst werden die Im Script gleich mit übernommen
 
Danke fuer eure Antworte. Aber ich suche eine Lösung der direkt auf ein Rechner laeuft ohne Internetverbindung. Also nur HTML und Javascript. Nur Rechner mit den Bilder.
 
Mit Javascript hast du keinen Zugriff auf deinen Rechner .
Wenn das sowieso bei dir zuhause ohne Internet laufen soll dann kannst du die Bilder auch ohne Browser öffnen.

Einige Browser können auch Ordner lesen . Dazu ziehst du den Ordner einfach ins Browser Fenster rein und dann bekommst du eine Liste was für Bilder da drinne sind .

Dann könte man Theoretisch mit Greasemonkey eine Slideshow laufen lassen, die auch ohne Internet laufen müßte.

Aber wie gesagt ,da es für dich alleine zuhause sein soll , solltest du ein normales Programm dafür nutzen.
Die spielerein mit Browser und Javascript machen da kein sinn finde ich, dafür gibt es genug Slideshow Programme
 
Danke wiederum fuer die schnelle und informative Antwort. Die Situation ist etwas banal. Die Slideshow findet in einem oefentlichen Lokal statt aber ohne LAN Anschluss. Statt die Bilder aller ueber mein Account mit LTE zu schicken, haette ich sie lieber dabei. Ich schaue mir Grease Monkey an. Sonst bleibt mir nur ein Fertigprogram wie Movavi was erheblichen Aufwand mit sich bringt.

Danke noch mal fuer Deine positive Einstellung zu diesem Thread

GR
 
Hallo vom Neuen hier im Forum und erstmal besten Dank an @basti1012 für die tollen Slideshow-Beispiele!
Nutze die Coronabedingte Kurzarbeit, endlich mal html zu lernen und bin gerade dabei meine erste Website zu erstellen (für meine Frau).

Und da sind wir schon bei meinem Problem: Wie kriege ich es hin, dass der Inhalt der Seite im Anschluss der Slideshow angezeigt wird, und nicht darunter liegt? Über „margin“ klappt das grundsätzlich, aber wenn es beim hochformatigen Viewport passt dann ist beim querformatigen Viewport ein viel zu großer Abstand zwischen der Slideshow und der grünen Fläche mit dem #statement. Wie geht das?

Herzlichen Dank für eine Antwort,
Ralf

Hier der Link zur html-Datei:
https://filehorst.de/d/dGwqnfgn
 
Hallo

Habe den obigen Code für meine Seite zu adaptieren versucht und bin mit dem Ergebnis recht zufrieden. Jedoch schaffe ich es partout nicht, dass die Fotos in der Mitte des Bildschirms auftauschen. Was muss ich zusätzlich noch eingeben und wo? Vielen Dank vorab.



<html xmlns="http://www.felger.swiss/KH/Safari-Tour_Bern/xhtml">

<head>
<meta content="de-ch" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ohne_Titel_1</title>
<style type="text/css">
.auto-style1 {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style2 {
text-align: center;
}
</style>
</head>

<body style="margin: 0; background-image: url('../../files/Hintergrund_sw_gross.jpg'); background-attachment: fixed">

<div class="auto-style2">

<div class="auto-style2">


<h2 class="auto-style1">Foto-Safari durch Bern</h2>

<div class="w3-content w3-display-container">
<img class="mySlides" src="http://www.felger.swiss/KH/Safari-Tour_Bern/files/IMG_8318.jpg" style="width:40%">
<img class="mySlides" src="http://www.felger.swiss/KH/Safari-Tour_Bern/files/IMG_8319.jpg" style="width:40%">
<img class="mySlides" src="http://www.felger.swiss/KH/Safari-Tour_Bern/files/IMG_8320.jpg" style="width:40%">
<img class="mySlides" src="http://www.felger.swiss/KH/Safari-Tour_Bern/files/IMG_8321.jpg" style="width:40%">
<img class="mySlides" src="http://www.felger.swiss/KH/Safari-Tour_Bern/files/IMG_8322.jpg" style="width:40%">
<img class="mySlides" src="http://www.felger.swiss/KH/Safari-Tour_Bern/files/IMG_8324.jpg" style="width:40%">
<img class="mySlides" src="http://www.felger.swiss/KH/Safari-Tour_Bern/files/IMG_8327.jpg" style="width:40%">
<img class="mySlides" src="http://www.felger.swiss/KH/Safari-Tour_Bern/files/IMG_8328.jpg" style="width:40%">
<img class="mySlides" src="http://www.felger.swiss/KH/Safari-Tour_Bern/files/IMG_8329.jpg" style="width:40%">
<img class="mySlides" src="http://www.felger.swiss/KH/Safari-Tour_Bern/files/IMG_8331.jpg" style="width:40%">

</div>
<script>
var slideIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x.style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 5000); // Change image every 5 seconds
}
</script>

</div>
<p class="auto-style2">&nbsp;</p>
<p class="auto-style2">
&nbsp;</p>
</div>

</body>

</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben