- Web Templates
- E-commerce Templates
- CMS und Blog Templates
- Facebook Templates
- Website-Builder
FAQs
General Tutorials
MonsterONE Subscrioption
“Coin” Slider
November 15, 2010
Das ist einen Slider-Skript, der automatisch die Bilder schneiden kann, um verschiedene Übergangseffekten zu erreichen. Die ausführliche Anleitungen finden Sie hier.
JavaScript
Damit das Skript richtig funktioniert, müssen diese Zeile des HTML-Codes in der index-#.html Datei mit einem Slider sein, um coin-slider.js Script und jQuery Framework zu haben:
Der <head> Abschnitt der index-#.html Datei hat diese Codezeilen damit die Skript-Funktionalität mit Grundwerte zu initialisieren:
Dieser Skript wird mit einem <div> Element, der #coin-slider id hat, initialisiert. Skriptattribute definieren die folgende Werte:
• width: 565 – Breite des Slider-Panels ;
• height: 290 – Höhe des Slider-Panels;
• spw: 7 – Quadrate pro Breite;
• sph: 5 – Quadrate pro Höhe;
• delay: 3000 – Verzögerung zwischen den Bildern (ms);
• sDelay: 30 – Verzögerung zwischen Quadraten (ms);
• opacity: 0.7 – Opazität des Titels und Navigation;
• titleSpeed: 500 – Geschwindigkeit von Erscheinungsbild (ms);
• effect: ‘ ‘ – Übergangseffekten, random ist standardmäßig (random, swirl, rain, straight);
• navigation: true – prev/next und Buttons;
• links : true – Bilder als Links angezeigt werden;
• hoverPause: true – Pause beim Schweben.
HTML
Unten befindet sich die Darstellung des HTML-Skripts:
Jede Folie ist ein Bild (<img>Tag), das in einem Link (<a>Tag) ist. Mit dem <span> Element können Sie eine Bildbeschreibung hinzufügen. Um eine Folie hinzuzufügen geben Sie das folgendes an:
CSS
In der Hauptdatei style.css gibt es ein Stylesheet des Skripts. Bearbeiten Sie die folgende Styles:
