W3.JS HTML-Diashows
Diaschau beginnen:
w3.slideshow(selector, interval (milliseconds))
Beispiel
<img class="nature" src="img_snowtops.jpg">
<img class="nature" src="img_mountains.jpg">
<img class="nature" src="img_nature.jpg">
<script>
w3.slideshow(".nature");
</script>
Kein Autostart
Um zu verhindern, dass die Diashow automatisch startet, setzen Sie den Intervallparameter auf 0:
Beispiel
w3.slideshow(".nature", 0);
Nächste Folie
Fügen Sie Schaltflächen hinzu, um durch die Diashow zu blättern:
Wenn Sie eine Diashow starten, gibt die Funktion w3.slideshow() ein Objekt zurück, das die Diashow darstellt.
var
myShow = w3.slideshow(".nature", 0);
Das Slideshow-Objekt enthält Eigenschaften und Methoden wie next() und previous():
Beispiel
<button onclick="myShow.previous()">Previous</button>
<button onclick="myShow.next()">Next</button>
Mehr Diashows
Jedes HTML-Element kann in eine Diashow eingebunden werden.
Definieren Sie welche, indem Sie CSS-Selektoren verwenden.
Beispiel
Überschriften:
<h1 class="city">London</h1>
<h1 class="city">Paris</h1>
<h1
class="city">Tokyo</h1>
<script>
w3.slideshow(".city");
</script>