- Web Templates
- E-commerce Templates
- CMS und Blog Templates
- Facebook Templates
- Website-Builder
FAQs
General Tutorials
MonsterONE Subscrioption
“Faded” Slider (mit dem Fade-Effekt)
November 15, 2010
Es ist ein Slider-Script, der den Fade-Effekt für den Wechseleffekten verwendet. Diesen Slider kann man nicht nur für Bilder, sondern auch für verschiedene Inhalt Blöcke nutzen. Folgen Sie diesem Link, um die Installations- und Konfigurationsanleitung zu erhalten.
JavaScript
Damit das Script funktioniert muss die index-#.html Datei mit einer Galerie diese Zeile des HTML-Codes haben, um das jquery.faded.js Script und das jQuery Framework zu setzen:
So sieht die Darstellung vom HTML Skript für verschiedene Inhalte aus:
CSS
In der style.css Hauptdatei finden Sie die Stylesheets, die mit dem Script verbunden sind. Verändern Sie die folgende Stilen:
JavaScript
Damit das Script funktioniert muss die index-#.html Datei mit einer Galerie diese Zeile des HTML-Codes haben, um das jquery.faded.js Script und das jQuery Framework zu setzen:
Im <head>Bereich (oder irgendwo vor dem schließenden </body> Tag) der index-#.html Datei gibt es diese Zeile des Codes, die Script-Funktionalität mit Grundwerten initialisieren:
Dieses Script wird mit einem <div>-Element mit der <div> ID initialisiert. Script Attributen legen die folgenden Werte fest:
• speed: 300 – legt die Abspielgeschwindigkeit der Animation fest;
• crossfade: false – Inhalt überblendet;
• bigtarget: false – damit man mit dem Drück auf den inhalt weiter geht;
• loading: false – nur für Bilder, prüft, on Bilder vor dem Darstellung uploaded werden-;
• autoheight: false – Höhe automatisch einstellen;
• pagination: “pagination” – setzt auf true und Klasse Name für die Seitennummern; setzen Sie auf false um diese Funktion zu deaktivieren;
• autopagination: true – setzen Sie auf true um die Seitenummerierung automatisch zu generieren;
• nextbtn: “next” – Klasse für die “Nächste”-Schaltfläche;
• prevbtn: “prev” – Klasse für die ” Vorherige”-Schaltfläche;
• loadingimg: false – Standort zum Laden von Bild (z.B. /img/loading.gif) wenn Sie hochladen;
• autoplay: false – Inhalt automatisch abspielen (legen Sie den positiven Zahlenwert für true fest); setzen Sie auch das Zeitintervall (nehmen 1000 für 1 Sekunde);
• autorestart: false – automatischer Neustart wenn Autoplay stoppt (legen Sie den positiven Zahlenwert für true fest); setzen Sie auch das Zeitintervall (nehmen 1000 für 1 Sekunde);
• random: false – setzen Sie auf true um Zufallsreihenfolge zu erreichen.
HTML So sieht die Darstellung vom HTML Skript für Bilder aus:
Um eine neue Folie zu bekommen, fügen Sie einfach ein Bild hinzu.(<img> tag):
So sieht die Darstellung vom HTML Skript für verschiedene Inhalte aus:
Um eine neue Folie zu bekommen, benötigen Sie eine geordnete Liste(<li> tag):
CSS
In der style.css Hauptdatei finden Sie die Stylesheets, die mit dem Script verbunden sind. Verändern Sie die folgende Stilen:
