Le contenu principal de cet article est de faire une image de carrousel sous la barre de navigation pour jouer automatiquement les dernières nouvelles importantes pour votre référence. Le contenu spécifique est le suivant
1. Diagramme de carrousel réactif
// Diagramme de carrousel réactif
<div id = "MyCaRousel"> <Ol> <li data-target = "# mycarel" data-slide-to = "0"> </li> <li data-target = "# mycaresel" data-slide-to = "1"> </li> <li data-target = "# mycarousel" data-slide-to = "2"> </li> </ ol> </ ol> <div> "DIV-SLIDE-TO =" 2 "> </li> </ OL> style = "background: # 223240;"> <a href = "#"> <img src = "img / slide1.png"> </a> </ div> <div style = "background: # f5e4dc;"> <a href = "#"> <img src = "iMg / Slide2.png"> </a> </ div> Style = "Background: # de2a2d;"> <a href = "#"> <img src = "img / slide3.png"> </a> </v> </ div> <a href = "# myCaReeSel" data-Slide = "PREV"> ‹< / a> <a href = "# myCarousel" Data-Slide = "Next"> tr = "
// le contrôle jQuery requis
$ ('# MyCaRousel'). Carousel ({// Définir la lecture automatique / 2 secondes Intervalle: 3000,});// ajuster la position de la flèche du carrousel
$ ('. Carousel-inner IMG'). Eq (1) .Height () || $ ('. Carousel-inner IMG'). Eq (1) .Height () || $ ('. Carousel-inner iMg'). Eq (2) .Height (); $ ('. Carousel-inner iMg'). Eq (2) .Height (); $ ('. Carousel-inner iMg'). Eq (2) .Height (); $ ('. Carousel-Control'). CSS ('line-height', $ height + 'px');});// requis CSS
A: Focus {Outline: Aucun;}. Navbar-Brand {Padding: 0;} # MyCarel {margin: 50px 0 0;}. Carousel-inner .item img {margin: 0 auto;}. Carousel-Control {Font-Size: 100px;}Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher un sujet merveilleux: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap
Merveilleux sujet Partage: JQUERY Picture Carrousel Javascript Picture Carrousel Bootstrap Picture Carrousel
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.