1. Strukturanalyse
Ein Karussellbild besteht hauptsächlich aus drei Teilen:
☑ Bilderkarussell
☑ Zähler für Karussellbilder
☑ Controller für Karussellbilder
Schritt eins: Entwerfen Sie einen Container für Karussellbilder. Verwenden Sie den Karussellstil im Bootstrap-Framework und definieren Sie einen ID-Wert für diesen Container, damit das Datenattribut später zum Deklarieren des Triggers verwendet werden kann.
<div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ol> </div>
Schritt 3: Gestalten Sie den Karussell-Bildwiedergabebereich. Bei der gesamten Wirkung von Karussellbildern ist der Wiedergabebereich der kritischste Bereich. Dieser Bereich wird hauptsächlich zum Platzieren von Bildern verwendet, die gedreht werden müssen. Dieser Bereich wird mithilfe des Karussell-Innenstils gesteuert und auch im Karussellcontainer platziert. Jedes Karussellbild wird im Artikelcontainer platziert:
<div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active">1</li> … </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a> </div> … <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a> </div> </div> </div>
Schritt 4: Karussellbildbeschreibung festlegen Viele Karussellbildeffekte haben auch eigene Titel und Beschreibungen für jedes Bild. Tatsächlich bietet Carousel im Bootstrap-Framework auch ähnliche Effekte. Fügen Sie einfach den entsprechenden Code unten im Bild in item.
ein
<div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active">1</li> … </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> <!-- 图片对应标题和描述内容 --> <div class="carousel-caption"> <h3>图片标题</h3> <p>描述内容...</p> </div> </div> … </div> </div>
Schritt 5: Entwerfen Sie den Karussell-Bildcontroller. Oft verfügen Karussells auch über eine Vorwärts- und Rückwärtssteuerung. Dies wird in Carousel durch den Karussell-Steuerungsstil in Kombination mit links und rechts erreicht. Dabei bedeutet links die Vorwärtsbewegung und rechts die Rückwärtsbewegung. Es wird auch in den Karussellbehälter gelegt:
<div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> … </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> … </div> <!-- 设置轮播图片控制器 --> <a class="left carousel-control" href="" > <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href=""> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
2. Deklarative Touch-Karussell-Bildwiedergabe (kein JS erforderlich)
<div id="slidershow" class="carousel slide" data-ride="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0"></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img style="height: 300px;width: 800px"></a> <div class="carousel-caption"> <h3>图片标题1</h3> <p>描述内容1...</p> </div> </div> <div class="item"> <a href="##"><img style="height: 300px;width: 800px"></a> <div class="carousel-caption"> <h3>图片标题2</h3> <p>描述内容2...</p> </div> </div> <div class="item"> <a href="##"><img style="height: 300px;width: 800px"></a> <div class="carousel-caption"> <h3>图片标题3</h3> <p>描述内容3...</p> </div> </div> </div> <!-- 设置轮播图片控制器 --> <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
Der deklarative Ansatz wird durch die Definition des Datenattributs erreicht, mit dem sich die Position des Karussells leicht steuern lässt. Es umfasst hauptsächlich die folgenden Typen:
1. Data-Ride-Attribut: Nehmen Sie den Wert Karussell und definieren Sie ihn im Karussell.
2. Datenzielattribut: Der Wert ist der ID-Name oder eine andere vom Karussell definierte Stilkennung. Wie im vorherigen Beispiel gezeigt, ist der Wert „#slidershow“ und wird auf jeder Zeile des Karussellzählers definiert.
3. data-slide-Attribut: Der Wert umfasst prev, next, prev bedeutet rückwärts scrollen und next bedeutet vorwärts scrollen. Dieser Attributwert wird auch im a-Link des Karussell-Controllers definiert und der href-Wert des Controllers wird auf den Container 4 gesetzt. Der ID-Name des Karussells oder eine andere Stilkennung.
4. data-slide-to-Attribut: Wird verwendet, um den Index eines bestimmten Frames zu übergeben, z. B. data-slide-to = „2“, der direkt zum angegebenen Frame springen kann (der Index beginnt bei 0), dieselbe Definition auf jedem Li des Karussellzählers.
Hierbei ist zu beachten, dass Sie der #slidershow-Ebene einen Folienstil hinzufügen und Bilder und Bildwechseleffekte verwenden können, um ein flüssiges Gefühl zu erzielen.
<div id="slidershow" class="carousel slide" data-ride="carousel"> ... </div>
Zusätzlich zu data-ride="carousel", data-slide und data-slide-to unterstützt die Karussellkomponente auch drei weitere benutzerdefinierte Attribute:
Der folgende Code implementiert „Karussell ohne Endlosschleife“ und „Karussell-Zeitintervall beträgt 1 Sekunde“.
<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000"> ...... </div>
3. JavaScript-Trigger-Methode Bildkarussell
HTML:
<div id="slidershow" class="carousel slide"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0">1</li> <li data-target="#slidershow" data-slide-to="1">2</li> <li data-target="#slidershow" data-slide-to="2">3</li> </ol> <!-- 设置轮播图片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题1</h3> <p>描述内容1...</p> </div> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题2</h3> <p>描述内容2...</p> </div> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题3</h3> <p>描述内容3...</p> </div> </div> </div> <a class="left carousel-control" href="#slidershow" role="button"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
JS:
$(function(){
$("#slidershow").carousel({
interval:2000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
});Spezifische Parameter können in der carousel()-Methode festgelegt werden, wie zum Beispiel:
Bei der Verwendung können Sie beim Initialisieren des Plug-Ins verwandte Parameter übergeben, z. B.:
$("#slidershow").carousel({
interval: 3000
});Das Karussell-Plug-in im Bootstrap-Framework bietet Benutzern auch mehrere spezielle Aufrufmethoden. Die kurze Beschreibung lautet wie folgt:
.carousel("cycle"): Loop-Wiedergabe von links nach rechts;
.carousel("pause"): Loop-Wiedergabe stoppen;
.carousel("number"): Schleife zum angegebenen Frame, der Index beginnt bei 0, ähnlich einem Array;
.carousel("prev"): Rückkehr zum vorherigen Frame;
.carousel("next")：Nächster Frame
Das Obige ist eine detaillierte Einführung in das Javascript-Bildkarussell. Ich hoffe, dass dieser Artikel für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.
