El contenido principal de este artículo es hacer una imagen de carrusel debajo de la barra de navegación para jugar automáticamente las últimas noticias importantes para su referencia. El contenido específico es el siguiente
1. Diagrama de carrusel sensible
// Diagrama de carrusel receptivo
<div id = "myCarousel"> <ol> <li data-target = "#myCarousel" data-slide-to = "0"> </li> <li data-Target = "#myCarousel" data-slide-To estilo = "fondo:#223240;"> <a href = "#"> <img src = "img/slide1.png"> </a> </div> <div style = "fondo:#f5e4dc;"> <a href = "#"> <img src = "img/slide2.png"> </a> </div style = "Background:#de2a2d;"> <a href = "#"> <img src = "img/slide3.png"> </a> </div> </div> <a href = "#myCarousel" data-slide = "previo"> ‹/a> <a href ="#myCarousel "data-slide =" next "</aa> <a/divin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin> </Adin.
// El control jQuery requerido
$ ('#myCarousel'). Carousel ({// Establecer reproducción automática/intervalo de 2 segundos: 3000,});// ajustar la posición de flecha de carrusel
$ ('. 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-Hevight', $ Height + 'Px');});// requerido CSS
A: Focus {Outline: None;}. Navbar-Brand {Padding: 0;}#myCarousel {margen: 50px 0 0 0 0;}. Carousel-inner .Item img {margin: 0 auto;}. Carusel-Control {Font-Size: 100px;}Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntarle un tema maravilloso: Tutorial de aprendizaje de arranque Tutorial Practical Bootstrap
Maravilloso intercambio de temas: jQuery Picture Carousel JavaScript Picture Carousel Bootstrap Picture Carousel
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.