Einfache Slideshow erstellen

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

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

Jjaxi

Neues Mitglied
5 Februar 2018
6
0
1
54
Hallo liebes Forum,

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

Liebe Grüße
Jaxi
 

basti1012

Aktives Mitglied
26 November 2017
817
81
28
38
Minden
sebastian1012.bplaced.net
Also google schmeist da so viele Beispiele raus .Aber zur Vorsicht habe ich dir aus ein Beispiel eine Fiddle gemacht .Ist sogar Simpel zum nachbauen https://jsfiddle.net/basti1012/yuh2b4s5/

und das geiche nochmal mit automatischer Slideshow

https://jsfiddle.net/basti1012/yuh2b4s5/1/

Hier mit Effekten und Schrift einblendung

https://jsfiddle.net/basti1012/yuh2b4s5/2/

etwas komplizieter

https://jsfiddle.net/basti1012/yuh2b4s5/5/

und eine ohne Javascript
automatisch
https://jsfiddle.net/basti1012/yuh2b4s5/4/
Manuel
https://jsfiddle.net/basti1012/yuh2b4s5/6/


So das wahren genug Beispiele.
Du kannst aber auch Lightboxen oder Fancyboxen nutzen.Die können das fast alles auch .Je nachdem was du genau vor hast
 
Zuletzt bearbeitet:

basti1012

Aktives Mitglied
26 November 2017
817
81
28
38
Minden
sebastian1012.bplaced.net
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>
 

gerozing

Neues Mitglied
6 Juli 2019
3
0
1
72
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
 

basti1012

Aktives Mitglied
26 November 2017
817
81
28
38
Minden
sebastian1012.bplaced.net
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
 

gerozing

Neues Mitglied
6 Juli 2019
3
0
1
72
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.
 

basti1012

Aktives Mitglied
26 November 2017
817
81
28
38
Minden
sebastian1012.bplaced.net
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
 

gerozing

Neues Mitglied
6 Juli 2019
3
0
1
72
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
 
Werbung: