Der Hauptinhalt dieses Artikels besteht darin, ein Carousel -Bild unter der Navigationsleiste zu erstellen, um automatisch die neuesten wichtigen Nachrichten für Ihre Referenz zu spielen. Der spezifische Inhalt ist wie folgt
1. Responsive Karusselldiagramm
// Responsive Karusselldiagramm
<div id = "mycarousel"> <ol> <li data-target = "#mycarousel" Data-Slide-to = "0"> </li> <li data-target = "#mycarousel" Data-Slide-to = "1"> </li> <li data-target style = "Hintergrund:#223240;"> <a href = "#"> <img src = "img/slide1.png"> </a> </div> <div style = "background:#f5e4dc; style = "Hintergrund:#DE2A2D;"> <a href = "#"> <img src = "img/slide3.png"> </a> </div> </div> <a href = "#mycarousel" Data-Slide = "prev"> ‹</a> <a href = "#"#"#"#MyCarousel "," DataSlide "," DataSlide "," DataSlide "," DataSlide "," DataSlide "," DataSlside "," DataSlide "," DataSlide "," Data-Slide "," Data-Slide "" NEXT
// die erforderliche jQuery -Kontrolle
$ ('#mycarousel'). Carousel ({// automatische Wiedergabe einstellen/2 Sekunden Intervall: 3000,});// Die Karussellpfeilposition einstellen
$ ('. Carousel-innerer img'). Gl (1) .Height () || $ ('. Carousel-innerer img'). Gl (1) .Height () || $ ('. Carousel-innerer img'). Gl (2) .Height (); $ ('. Carousel-innerer img'). Gl (2) .Height (); $ ('. Carousel-innerer img'). Gl (2) .Height (); $ ('. Carousel-control').// Erforderliche CSS
A: FOCUS {SUCLINE: NON;}. Navbar-Brand {Padding: 0;}#MyCarousel {Margin: 50px 0 0 0;Wenn Sie immer noch eingehend lernen möchten, können Sie hier klicken, um Ihnen ein wunderbares Thema zu lernen und anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Wunderbares Thema Teilen: JQuery Bild Karussell JavaScript Bild Karussell Bootstrap Bild Karussell
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.