Manuelle Diashow
Anzeigen einer manuellen Diashow mit W3.CSS ist sehr einfach.
Erstellen Sie einfach viele Elemente mit dem gleichen Klassennamen:
Beispiel
<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">
Und zwei Tasten, um die Bilder zu blättern:
Beispiel
<a class="w3-btn-floating" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">❯</a>
Und ein JavaScript hinzufügen Bilder zu wählen:
Beispiel
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex
+= n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if
(n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex =
x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
Versuch es selber " JavaScript erklärt
Zuerst stellen Sie die slideIndex auf 1 (erstes Bild)
Dann rufen Sie showDivs () , um das erste Bild anzuzeigen.
Klickt der Benutzer auf eine der Schaltflächen rufen plusDivs ().
Die plusDivs () Funktion subtrahiert ein oder fügt man zum slideIndex.
Die showDiv () Funktion versteckt (Display = "none") alle Elemente mit dem Klassennamen "mySlides", und Anzeigen (Display = "block") das Element mit dem angegebenen slideIndex.
Wenn der slideIndex höher als die Anzahl der Elemente (x.length) ist, wird die slideIndex auf Null gesetzt.
Wenn die slideIndex weniger als 1 ist , wird es auf die Anzahl der Elemente (x.length) gesetzt.
Automatische Diashow
Um eine automatische Diashow angezeigt ist noch einfacher.
Sie brauchen nur ein wenig anders JavaScript:
Beispiel
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
}
Versuch es selber " HTML Folien
Die Folien müssen nicht Bilder sein.
Sie können jede HTML-Inhalte sein:
Slide 1
Lorem ipsum
Folie 2
Lorem ipsum
Folie 3
Lorem ipsum
Beispiel
<div class="mySlides">
<div class="w3-container w3-red">
<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the
moon in the 2020s</i></h1>
</div>
Versuch es selber " Diashow Caption
Fügen Sie einen Beschriftungstext für jeden Bildträger mit den w3-Display- * Klassen (topleft, topright, bottom, bottom oder Mitte):
Beispiel
<div class="w3-display-container mySlides">
<img src="img_fjords.jpg"
style="width:100%">
<div class="w3-display-bottomleft w3-container
w3-padding-hor-16 w3-black">
Trolltunga, Norway
</div>
</div>
Versuch es selber " Diashow Indicators
Ein Beispiel Tasten der Verwendung, um anzuzeigen, wie viele Folien gibt es in der Diashow sind, und die schieben der Benutzer gerade betrachtet.
Beispiel
<div class="w3-center">
<button class="w3-btn" onclick="plusDivs(-1)">❮
Prev</button>
<button class="w3-btn" onclick="plusDivs(1)">Next
❯</button>
<button class="w3-btn demo" onclick="currentDiv(1)">1</button>
<button class="w3-btn demo" onclick="currentDiv(2)">2</button>
<button class="w3-btn demo" onclick="currentDiv(3)">3</button>
</div>
Versuch es selber " Ein anderes Beispiel:
Beispiel
<div class="w3-content w3-display-container">
<img class="mySlides"
src="img_nature.jpg">
<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div
class="w3-center w3-display-bottomleft" style="width:100%">
<div class="w3-left" onclick="plusDivs(-1)">❮</div>
<div class="w3-right" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
</div>
</div>
Versuch es selber " Bilder als Indikatoren
Ein Beispiel von Bildern als Indikatoren:
Beispiel
<div class="w3-content" style="max-width:1200px">
<img class="mySlides"
src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides"
src="img_fjords_wide.jpg" style="width:100%">
<img class="mySlides"
src="img_mountains_wide.jpg" style="width:100%">
<div
class="w3-row-padding w3-section">
<div class="w3-col
s4">
<img class="demo w3-border
w3-hover-shadow"
src="img_nature_wide.jpg"
onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo
w3-border w3-hover-shadow"
src="img_fjords_wide.jpg"
onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo
w3-border w3-hover-shadow"
src="img_mountains_wide.jpg"
onclick="currentDiv(3)">
</div>
</div>
</div>
Versuch es selber " Animierte Slides
Beispiel
<img class="mySlides w3-animate-top" src="img_01.jpg">
<img class="mySlides
w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top" src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg"> Versuch es selber " Faded-Animation
Beispiel
<img class="mySlides w3-animate-fading" src="img_01.jpg">
<img class="mySlides
w3-animate-fading" src="img_02.jpg">
<img class="mySlides
w3-animate-fading" src="img_03.jpg">
<img class="mySlides
w3-animate-fading" src="img_04.jpg"> Versuch es selber "