Mit Bootstrap zum Schreiben von Karussell -Bild -Karussell kann viel Zeit sparen. Image Carousel ist eine gemeinsame Technologie auf Webseiten, aber wenn sie direkt geschrieben ist, ist eine lange JavaScript -Codierung erforderlich, und es ist nicht einfach, die Größe zu steuern.
Lassen Sie mich auch sagen, dass die ursprüngliche Bedeutung des Wortes Karussell ein Karussell ist.
1. Grundziele
Karussell zum Schreiben mehrerer Bilder auf der Webseite wird die Maus darauf platziert und die Bildbeschreibung finden Sie unter jedem Bild.
Da die Computer -Video -Aufnahmesoftware des Autors ziemlich schlecht ist, ist er auch der Ansicht, dass es nicht erforderlich ist, zu viel Zeit darauf zu ziehen. Er glaubt, dass das GIF unten mehr Farbverlust ist, solange es das Problem erklären kann, aber der grundlegende Effekt wird immer noch gezeigt.
Carousel, die Bildkarouselkomponente von Bootstrap, ist nicht mit IE6 und 7 kompatibel. Wenn der IE6 -Support erforderlich ist, müssen Sie den IE6 -Komponentenunterstützung von Bootstrap von dieser Website herunterladen (klicken Sie, um den Link zu öffnen). Gleichzeitig sickert die Bilddateibeschreibung in Google Chrome ein wenig schwarz, hat jedoch keinen Einfluss auf das Browsen:
Die Präsentationssituationen in verschiedenen Browsern sind unterschiedlich. IE8s Effekt ist so:
2. Grundlegende Ideen
Siehe das Seitenlayout des folgenden Bildes:
3. Produktionsprozess
1. Der erste Schritt in der vorherigen "Bootstrap zum Schreiben eines Dialogfelds, das auf der aktuellen Webseite geschlossen werden kann" (klicken Sie, um den Link zu öffnen).
Da Sie Bootstrap verwenden müssen, können Sie die Komponenten auf der offiziellen Website herunterladen (klicken Sie hier, um den Link zu öffnen). Die in der Produktionsumgebung verwendete Bootstrap -Version ist nicht mit 2 kompatibel. Es wird empfohlen, Bootstrap3 direkt gemäß den Entwicklungsdokumenten zu verwenden. Dieser Artikel wird auch basierend auf Bootstrap3 erstellt. Gleichzeitig muss der von Bootstrap3 bereitgestellte JavaScript -Effekt in JQuery 1.11 unterstützt werden (klicken Sie hier, um den Link zu öffnen). Sie können JQuery 1.11, kompatibel mit dem alten Browser IE6, von der offiziellen Website von JQuery und nicht mit Jquery2 herunterladen, die mit dem alten Browser IE6 nicht kompatibel sind. Konfigurieren Sie nach dem Herunterladen das Site -Verzeichnis. Dekompress Bootstrap3 direkt in das Site-Verzeichnis und platzieren Sie JQuery-1.11.1.js im JS-Verzeichnis, dh demselben Verzeichnis wie Bootstrap.js. Die Struktur des Standortordners ist ungefähr wie folgt:
2. Das Folgende ist der vollständige Code der Webseite, und der folgende Teil wird erläutert:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta name = "viewPort" content = no-teures = no-ungr. href = "css/bootstrap.css" rel = "styleSheet" media = "screen"> <script type = "text/javaScript" src = "js/jQuery-1.11.1.js"> </script> <script type = "text/javaScript" src = "js/bootstrap.js"> click> chapw./bootstrap.js " <body> <div> <div> <h1>Picture Carousel</h1> </div> <div> <div id="carousel" data-ride="carousel" data-interval="1000"> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" Data-Slide-to = "1"> </li> <li data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <div rollen = "listbox"> <div> <a href = "bilder/img0.jpg"> <img Src = "Img0.jpg0.jpg"> <IMG0> img0.jpg " </h3> <p> Bildbeschreibung von I bin img0 </p> </div> </div> <div> <a href = "bilder/img10.jpg"> <img src = "Bilder/img10.jpg"> </a> <h3> img10 </H3> <p> <pit href = "Bilder/img2.jpg"> <img src = "Bilder/img2.jpg"> </a> <div> <h3> img2 </h3> <p> Bildbeschreibung von I bin img2 </p> </div> </div> <a href = "#carousel-exam = span> </pbalte = taste = taste <a href = "#carousel-example-generic" rollen = "button" data-Slide = "next"> <span> </span> </a> </div> </div> </div> </body> </html>
(1) <kopf> Teil
<Head> <!-Deklarieren Sie die Webcodierung und passen Sie sich automatisch an die Browsergröße an. Um die CSS von Bootstraps zu verwenden, ist JQuery -Unterstützung erforderlich. Um Bootstraps JS zu verwenden, Titel-> <meta http-äquiv = "Content-Typ" content = "text/html; charSet = utf-8"/> <meta name = "viewport" content = "width = Geräte-Width, initial-scale = 1.0, user-scalable = no"> <> <links "stylesShet" stylesShet "stylesShetshref =" Media = "Bildschirm"> <script type = "text/javaScript" src = "js/jquery-1.11.1.js"> </script> <script type = "text/javaScript" src = "js/bootstrap.js"> </script
(2) <Body> Teil
Deklarieren Sie zuerst einen Containercontainer, der automatisch alle Elemente der Webseite zum Zentrum der Webseite gehören und dann Elemente in diesen Container schreiben kann.
Schreiben Sie zuerst den Header, deklarieren Sie einen Header und schreiben Sie dann einen Text in ihn.
<div> <h1> Bildkarousel </h1> </div>
Definieren Sie dann eine unbenannte Schicht Div, die hauptsächlich zur Standardisierung von Bildkarouselkomponenten verwendet wird. Die Größe der Bootstrap -Bildkarouselkomponente kann nicht für die darin enthaltenen Elemente angegeben werden, und es werden Breite und Höhenparameter hinzugefügt. Auf diese Weise wird die Bildkarussellkomponente verzerrt. Gleichzeitig müssen Sie Randrechte verwenden, um diese Komponente zu zentrieren: Auto; Rand-Links: Auto; im Stilattribut des Divs einschränken. Das zusätzliche Align = "Center" hat überhaupt keine Wirkung.
Schließlich gibt es detaillierte Beschreibungen jedes Teils der Bildkomponente:
<Div> <!-Der Name der Bildkarouselkomponente ist Karussell, und das Data-Ride-Element wird durch Bootstrap benötigt. Der Wert des Datenintervals besteht darin, das Bild alle 1000 Millisekunden zu ändern, dh 1 Sekunde. Wenn dieser Wert zu stark ist, wird die Komponente verzerrt-> <div id = "Carousel" data-ride = "Carousel" Data-Interval = "1000"> <!-Hier sind mehrere Bilder definiert. Wenn es noch ein Bild gibt, fügen Sie unten noch einen Artikel hinzu. Der Wert von Data-Slide-to wird hinzugefügt. The first picture, that is, the 0th picture must have class="active" otherwise the component will not work--> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" Data-Slide-to = "2"> </li> </ol> <div rollen = "listBox"> <!-Die folgenden sind detaillierte Änderungen jedes Bildes. Der Klassenwert des ersten Bildes muss Element aktiv sein, und der Rest ist Element-> <div> <! Wenn es keinen Hyperlink gibt, entfernen Sie das <a> Tag-> <a href = "Bilder/img0.jpg"> <img src = "Bilder/img0.jpg"> </a> <div> <! href = "Images/img10.jpg"> <img src = "Images/img10.jpg"> </a> <div> <h3> img10 </h3> <p> Bildbeschreibung von I bin img10 </p> </div> </div> <a href = img10/img20 </p> </div> </div> <a href = img2.jpg "> <img. src = "bilder/img2.jpg"> </a> <div> <h3> img2 </h3> <p> Bildbeschreibung von I bin img2 </p> </div> </div> </div> <! <span> </span> </a> <a href = "#carousel-example-generic" rele
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.