El uso de Bootstrap para escribir Carousel Image Carousel puede ahorrar mucho tiempo. Image Carousel es una tecnología común en las páginas web, pero si se escribe directamente, requiere una larga codificación de JavaScript, y no es fácil controlar el tamaño.
Permítanme decir también que el significado original de la palabra carrusel es un caballo de tiov.
1. Objetivos básicos
Carrusel Para escribir múltiples imágenes en la página web, el mouse se coloca sobre él y la descripción de la imagen se proporciona debajo de cada imagen.
Dado que el software de grabación de video por computadora del autor es bastante malo, también siente que no hay necesidad de aprovechar demasiado tiempo. Él piensa que mientras pueda explicar el problema, el GIF a continuación es más pérdida de color, pero el efecto básico aún se muestra.
Carousel, el componente de carrusel de la imagen de Bootstrap, no es compatible con IE6 y 7. Si se requiere soporte IE6, debe descargar el soporte de componentes IE6 de Bootstrap de este sitio web (haga clic para abrir el enlace). Al mismo tiempo, la descripción del archivo de imagen en Google Chrome se filtrará un poco de negro, pero no afectará la navegación:
Las situaciones de presentación en diferentes navegadores son diferentes. El efecto de IE8 es así:
2. Ideas básicas
Consulte el diseño de la página de la siguiente imagen:
3. Proceso de producción
1. El primer paso en el "bootstrap de bootstrap anterior para escribir un cuadro de diálogo que se puede cerrar en la página web actual" (haga clic para abrir el enlace)
Debido a que necesita usar Bootstrap, puede descargar los componentes en el sitio web oficial (haga clic para abrir el enlace). La versión Bootstrap utilizada en el entorno de producción no es compatible con 2. Se recomienda usar Bootstrap3 directamente de acuerdo con sus documentos de desarrollo. Este artículo también se realiza en base a Bootstrap3. Al mismo tiempo, el efecto JavaScript proporcionado por Bootstrap3 debe ser compatible en JQuery 1.11 (haga clic para abrir el enlace). Puede descargar jQuery 1.11 compatible con el antiguo navegador IE6 del sitio web oficial de jQuery, en lugar de jQuery2 incompatible con el antiguo navegador IE6. Después de descargar, configure el directorio del sitio. Descomprima Bootstrap3 directamente al directorio del sitio y coloque jQuery-1.11.1.js en el directorio JS, es decir, el mismo directorio que Bootstrap.js. La estructura de la carpeta del sitio es aproximadamente la siguiente:
2. El siguiente es el código completo de la página web, y se explicará la siguiente parte:
< xmlns = "http://www.w3.org/1999/xhtml"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta name = "viewport" contenido = "width = dispositivo width, inicial-scale = 1.0, href = "css/bootstrap.css" rel = "stylesheet" medios = "pantalla"> <script type = "text/javascript" src = "js/jQuery-1.11.1.js"> </script> <script type = "text/javascrips" src = "js/bootstrap.js"> </</title> script> picture CaroSely <body> <iv> <div> <h1> Picture Carousel </h1> </div> <div> <div id = "Carousel" data-ride = "Carousel" data-interval = "1000"> <ol> <li data-Target = "#Carousel-Eexample" Data-Slide-to = "0"> </li> <li Data-Target = "#CAROUSELELELEMELELEMELEME-GENERIC" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div role="listbox"> <div> <a href="images/img0.jpg"><img src="images/img0.jpg"></a> <div> <h3> img0 </h3> <p> Image description of I am img0</p> </div> </div> <div> <a href="images/img10.jpg"><img src="images/img10.jpg"></a> <div> <h3> img10 </h3> <p> Image description of I am img10</p> </div> </div> <div> <a href="images/img2.jpg"><img src="images/img2.jpg"></a> <div> <h3> img2 </h3> <p> Image description of I am img2</p> </div> </div> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span></span> </a> <a href = "#Carousel-Example-Generic" role = "Button" data-slide = "next"> <span> </span> </a> </div> </div> </div> </body> </html>
(1) <Head> Parte
<Bead> <!-Declarar la codificación web, adaptarse automáticamente al tamaño del navegador. Para usar el CSS de Bootstrap, se requiere soporte de jQuery. To use bootstrap's js, title--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link 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"> </script> <title> Picture Carousel </title> </head>
(2) <Body> Parte
Primero declare un contenedor de contenedor, que puede hacer que todos los elementos de la página web pertenezcan al centro de la página web y luego escriban elementos en este contenedor.
Primero escriba el encabezado, declare un encabezado y luego escriba una pieza de texto dentro de él.
<div> <h1> Picture Carousel </h1> </div>
Luego, defina una capa Div sin nombre, que se usa principalmente para estandarizar los componentes de la imagen del carrusel. No se puede especificar el tamaño del componente de carrusel de la imagen de arranque para los elementos dentro, y se agregan parámetros de ancho y altura. De esta manera, se distorsionará el componente de la imagen del carrusel. Al mismo tiempo, para centrar este componente, debe usar Margin-Right: Auto; margen-izquierda: auto; En el atributo de estilo del Div para restringir. El alineado adicional = "Centro" no tiene ningún efecto en absoluto.
Finalmente, hay descripciones detalladas de cada parte del componente de la imagen:
<Viv> <!-El nombre del componente de carrusel de la imagen es el carrusel, y el elemento de ride de datos es requerido por Bootstrap. El valor del intervalo de datos es cambiar la imagen cada 1000 milisegundos, es decir, 1 segundo. Si este valor es demasiado, el componente se distorsionará-> <div id = "Carousel" Data-Ride = "Carousel" Data-Interval = "1000"> <!-Hay varias imágenes definidas aquí. Si hay una imagen más, agregue un elemento más a continuación. El valor del deslizamiento de datos se agrega uno. 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 role = "listbox"> <!-Las siguientes son ediciones detalladas de cada imagen. El valor de clase de la primera imagen debe ser activo, y el resto son elementos-> <div> <!-Significa que haga clic en la imagen IMG0.jpg para abrir el hipervínculo de img0.jpg. Si no hay hipervínculo, elimine la etiqueta <a>-> <a href = "images/img0.jpg"> <img src = "imágenes/img0.jpg"> </a> <div> <!-Descripción del texto en la imagen-> <h3> img0 </h3> <p> Imagen Descripción de I IMG0 </p> </Div> <Div> <Div> <Div> <Div> <Div> <Div> <Div> href = "imágenes/img10.jpg"> <img src = "imágenes/img10.jpg"> </a> <div> <h3> img10 </h3> <p> Descripción de la imagen de I Amg10 </p> </div> </div> <div> <hiv> <a href = "Images/img2.jpg"> <img src = "imágenes/img2.jpg"> </a> <div> <h3> img2 </h3> <p> Descripción de la imagen de I am img2 </p> </div> </div> </div> <!-Aquí hay dos botones en el componente que piensa en el marco de la izquierda y correcto, el código de marco correcto-> <a href = "#Carousel-exame-generic" rol "=" Botón "datos" de la izquierda, "código de marco correcto-> <a href ="#Carousel-exame-generic " <span> </span> </a> <a href = "#Carousel-Example-Generic" rol = "Botton" data-slide = "next"> <span> </span> </div> </div>
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
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.