Использование начальной загрузки для написания карусели карусель может сэкономить много времени. Image Carousel - это обычная технология на веб -страницах, но если он написан напрямую, для этого требуется длинное кодирование JavaScript, и нелегко контролировать размер.
Позвольте мне также сказать, что первоначальное значение слова Carousel-это каравира.
1. Основные цели
Карусель для написания нескольких изображений на веб -странице, мышь размещены на ней, а описание изображения приведено ниже каждого изображения.
Поскольку программное обеспечение для компьютерной видео -видео с компьютерным видео довольно плохое, он также считает, что нет необходимости проводить слишком много времени. Он думает, что, пока это может объяснить проблему, GIF ниже больше потери цвета, но основной эффект все еще показан.
Карусель, компонент каруселя для начальной загрузки, не совместим с IE6 и 7. Если требуется поддержка IE6, вам необходимо загрузить поддержку компонентов Bootstrap IE6 с этого веб -сайта (нажмите, чтобы открыть ссылку). В то же время описание файла изображения в Google Chrome просачивается немного черного, но это не повлияет на просмотр:
Презентационные ситуации в разных браузерах разные. Эффект IE8 такой:
2. Основные идеи
Смотрите макет страницы следующего изображения:
3. Процесс производства
1. Первый шаг в предыдущей «начальной загрузке, чтобы написать диалоговое окно, которое можно закрыть на текущей веб -странице» (нажмите, чтобы открыть ссылку)
Поскольку вам нужно использовать начальную загрузку, вы можете скачать компоненты на официальном веб -сайте (нажмите, чтобы открыть ссылку). Версия начальной загрузки, используемая в производственной среде, не совместима с 2. Рекомендуется использовать Bootstrap3 напрямую в соответствии с его документами разработки. Эта статья также сделана на основе Bootstrap3. В то же время, эффект JavaScript, предоставленный Bootstrap3, должен быть поддержан в JQUERY 1.11 (нажмите, чтобы открыть ссылку). Вы можете скачать JQUERY 1.11, совместимый со старым браузером IE6 с официального сайта jQuery, а не JQuery2, несовместимого со старым браузером IE6. После загрузки настройте каталог сайта. Decompress Bootstrap3 непосредственно в каталог сайта и поместите jquery-1.11.1.js в каталог JS, то есть тот же каталог, что и Bootstrap.js. Структура папки сайта примерно следующим образом:
2. Ниже приведен полный код веб -страницы, и будет объяснена следующая часть:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta name = "viewport" width = defic 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"> <//witthours> <//wittle> <//script> <//cript> <//cript> <//cript> <//cript> <//cript> <//javascript ". </head> <body> <div> <div> <h1> картинка карусель </h1> </div> <div> <div id = "carousel" data-ride = "carousel" data-interval = "1000"> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <lit-genem. 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 = "Image/img0.jpg"> <iv> <siM> <si-Img> <siM> <siM> <siM> </img> <siM> <siM> </img> <siM> <siM> <siM> <siM> <siM> <siM> <siM> <siM> <siM> </Img0.jpg " </h3> <p> Описание изображения Im im img0 </p> </div> </div> <div> <a href = "images/img10.jpg"> <img src = "Images/img10.jpg"> </a> <div> <h3> </h3> <p> Описание изображения Im Img10 </p> </d Div> </h3> <p>. href = "Images/img2.jpg"> <img src = "Images/img2.jpg"> </a> <div> <h3> img2 </h3> <p> Описание изображения Im Imm2 </p> </div> </div> <a href = "#carousel-example-generic" koled = ”кнопка" Data-slide = "span> <>"#> "spane-generic" vepnecumple-spaner generic ". <a href = "#carousel-example-generic" rol = "button" data-slide = "Далее"> <pan> </span> </a> </div> </div> </div> </body> </html>
(1) <голова> часть
<Head> <!-Объявите веб-кодирование, автоматически адаптируется к размеру браузера. Для использования CSS Bootstrap требуется поддержка jQuery. Для использования JS Bootstrap, название-> <Meta HTTP-equiv = "Content-Type" Content = "Text/HTML; charset = UTF-8"/> <meta name = "viewport" content = "width = device-width, начальная шкала = 1,0, пользовательский scalbable = no"> <nlind href = css/booptrap.cssesesese levelable = "no"> <link href = "css/booptrap.cssese. <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) <Тело> Часть
Сначала объявьте контейнер, который может автоматически сделать все элементы веб -страницы, принадлежащие центру веб -страницы, а затем напишите элементы в этом контейнере.
Сначала напишите заголовок, объявите заголовок, а затем напишите в него кусок текста.
<div> <h1> изображение карусель </h1> </div>
Затем определите неназванный Layer Div, который в основном используется для стандартизации компонентов каруселей изображения. Размер компонента каруселя карусели изображения начальной загрузки не может быть указан для элементов внутри него, и добавляются параметры ширины и высоты. Таким образом, компонент каруселя изображения будет искажен. В то же время, чтобы сосредоточиться на этом компоненте, вы должны использовать маржу вправо: Auto; Полевая левая: Авто; в атрибуте стиля Div с ограничением. Дополнительный align = "center" вообще не влияет.
Наконец, есть подробные описания каждой части компонента изображения:
<div> <!-Название компонента каруселя изображения-карусель, а элемент обработки данных требуется Bootstrap. Значение интервала данных состоит в том, чтобы изменить изображение каждые 1000 миллисекунд, то есть 1 секунду. Если это значение слишком много, компонент будет искажен-> <div id = "carousel" data-ride = "carousel" data-interval = "1000"> <!-Здесь определено несколько изображений. Если есть еще одно изображение, добавьте еще один элемент ниже. Значение данных-вдали добавляется одно. Первая картина, то есть 0-я картина должна иметь Class = "Active" в противном случае компонент не будет работать-> <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-targeter-#-#-######-###-#-#-#-#-#-##-##-##-##-#-#-kenexamem. data-slide-to = "2"> </li> </ol> <div role = "listbox"> <!-Ниже приведены подробные изменения каждого изображения. Значение класса первого изображения должно быть активным элементом, а остальные-это элемент-> <viv> <!-это означает, что нажмите на изображение img0.jpg, чтобы открыть гиперссылку IMG0.jpg. Если гиперссылка нет, удалите тег <a>-> <a href = "Images/img0.jpg"> <img src = "Images/img0.jpg"> </a> <div> <!-текстовый описание под изображением-> <h3> </h3> <p> <precom. href = "Images/img10.jpg"> <img src = "Images/img10.jpg"> </a> <div> <h3> img10 </h3> <p> Описание изображения Im Img10 </p> </div> </div> <div> <a href = "Img2.jpg" src="images/img2.jpg"></a> <div> <h3> img2 </h3> <p> Picture description of I am img2</p> </div> </div> </div> <!--Here are two buttons in the component that think left and right, fixed frame code--> <a href="#carousel-example-generic" role="button" data-slide="prev"> <pran> </span> </a> <a href = "#carousel-example-generic" rol = "кнопка" data-slide = "Далее"> <pan> </span> </div> </div>
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.