Эффект карусели изображения можно увидеть в Интернете, и многие люди также называют его слайд -шоу. Основным эффектом дисплея является воспроизведение нескольких картинок в цикле, играя справа налево. Игра в это сделает паузу, когда мышь будет зависать над изображением. Если мышь зависает или нажимает точку в правом нижнем углу, будет отображаться соответствующее изображение.
Этот эффект карусели изображения реализован в платформе Bootstrap через плагин Carousel
Скриншот демонстрационного эффекта:
Код:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <!-<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootStrap.min.css"> <link rel sticeheet " href = "css/bootstrap.min.css"/> <style> body {padding: 10px; margin: 10px;} </style> </head> <body> <div id = "mycarousel"> <!-Шаг 1: контейнеры дизайна для картин каруселей. -> <!-#slidershow Layer добавляет стиль слайда и использует изображения и картинки, чтобы переключить эффекты, чтобы сделать его плавным-> <ol> <!-Шаг 2: Проектируйте счетчик изображения каруселей. -> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousele" data-slide-to = "1"> </li> <li data-target = "#mycarousele" strick-to = "2"> </li> </ol> <div> <! Carousel-inner Style для контроля-> <div> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"> <div> <h4> Название 1 </h4> <p> Изображение 1 </p> </div> <div> src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> название 2/h4> <p> Изображение 2 </p> </div> <div> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> название 2/h4> <p> Изображение 2 </p> </div> <div> <img src = "http://images3.c-ctrip.com/rk/201403/yfdd580145a.png"> <div> <h4> thitle three </h4> <p> Введение в содержание картинки три </p> </div> </div> <!-Шаг 4: Разработка контроллера картин. Воспроизведите левый контроль каруселей вперед и контроллер, который играет назад-> <a href = "#mycarousele" data-slide = "prev"> ‹<!-<a href = "#slidershow" rol = "data-slide =">-> <span> </span> </a> <a href = "#mycarousel">-> <span> </span> </a> <a href = "#mycarousel">- Data-slide = "Next" >› <pran> </span> <!-<a href = "#carousel-example-generic" data-slide = "prev"> <pan> </span> </a> <a href = "#carousel-example-generic" data-slide = "Next"> <pan> </span> </a>-> </div> <script> $ ('. carousel'). carousel () </script> <script type = "text/javascript" src = "js/jquery.min.js"> </script> <script type = "javascript" src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>-> <!-<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html> /* bootstrap.css файловой строка 5835 до строки 5863*/./. /*Абсолютное расположение всей области подсчета*/внизу: 10px; /*10px от нижней части контейнера карусель*/z-index: 15; /*Установите свой уровень на оси z*//*Центр всей области подсчета на уровне*/слева: 50%; ширина: 60%; лебь накладки: 0; маржине-левый: -30%; текстовой алюсь: центр; Список стиля: нет;}. Карусель-индикаторы li {отображение: inline-block; width: 10px; высот: 10px; -999px; курсор: указатель; фоновый цвет: #000/9; фоновый цвет: rgba (0, 0, 0, 0); граница: 1px solid #fff; граница-радиус: 10px;}/*Установите стиль текущего состояния*/. Carousel-indicators .Active {width: 12px; высота: 12px; margin: 0;Картинка карусель-игра в декларативную карусель
Есть два способа запустить диаграмму карусели, один является декларативным, а другой - JavaScript. Во -первых, давайте посмотрим на декларативный метод.
Декларативный метод реализуется путем определения атрибута данных, который может легко контролировать положение карусели. В основном включает в себя следующие типы:
• Свойство данных о данных: возьмите карусель и определите ее на карусели.
• Свойство Target Data: Возьмите имя идентификатора или другое идентификатор стиля, определяемое каруселем значения. Как показано в предыдущем примере, возьмите значение «#Slidershow» и определите его на каждом LI счетчика карусели.
• Атрибут склада данных: значения включают PREV, NEXT, PREV означает прокрутку назад, и следующее означает прокрутку вперед. Это значение свойства также определяется по ссылке контроллера карусели, а значение Href контроллера устанавливается на идентификатор идентификатора или другого идентификатора стиля карусели контейнера.
• Атрибут с рассылкой данных: используется для прохождения подсказок определенного кадра, такого как данные Data-Slide-to = "2", который может быть непосредственно перенаправлен на этот указанный кадр (индекс начинается с 0), а также определяется на каждом LI счетчика карусели.
В дополнение к Data-ride = "carousel", Data-Slide и Data-Slide-To, компонент Carousel также поддерживает три других пользовательских свойств:
| Имя атрибута | тип | значение по умолчанию | описывать |
| ДАННЫЕ ВОЗВРАЩЕНИЕ | число | 5000 | Время ожидания (миллисекунд) для вращения слайдов. Если ложь, карусель не запустит петлю автоматически |
| пауза данных | нить | прокачать | Мышь по умолчанию приостановлена в области слайда, и воспроизведение начнется при уходе. |
| ДАННЫЕ СВОБОДА | Логическая ценность | истинный | Является ли карусель непрерывная петля |
Следующий код реализует «Карусель непрерывно непрерывно», а «интервал времени карусели составляет 1 секунду».
<div id = "slidershow" data-ride = "carousel" data-wrap = "false" data-interval = "1000"> ...... </div>
Приведенные выше три атрибута могут быть определены на элементах контейнера или на идентификаторах (или левом и правом управлении), но последнее определение имеет более высокий приоритет.
Image Carousel-метод триггера Javascript
Три оператора Data-ride = "carousel" и data-slide = "prev" и data-slide = "Далее" были удалены. Давайте используем код JS для реализации функций «Автоматической карусели» и «вперед и назад».
Используйте JS для реализации функций «Автоматической картинки карусель» и «вперед и назад кнопок»
По умолчанию, если атрибут Data-ride = "carousel" определяется на контейнере карусели, эффект переключения изображения карусели будет автоматически загружен после загрузки страницы. Если атрибут Data-Ride не определен, переключение изображения карусели может быть запускается с помощью метода JavaScript. Конкретный метод использования следующим образом:
Кода -копия выглядит следующим образом:
$ (". Карусель"). Карусель ();
Вы также можете указать это по идентификатору контейнера:
Кода -копия выглядит следующим образом:
$ ("#slidershow"). carousel ();
Конкретные параметры могут быть установлены в методе Carousel (), например:
| Имя атрибута | тип | значение по умолчанию | описывать |
| интервал | число | 5000 | Время ожидания (миллисекунд) для вращения слайдов. Если ложь, карусель не запустит петлю автоматически |
| пауза | нить | прокачать | Мышь по умолчанию приостановлена в области слайда, и воспроизведение начнется при уходе. |
| сворачивать | Логическая ценность | истинный | Является ли карусель непрерывная петля |
При его использовании вы можете передать соответствующие параметры статуса при инициализации плагина, например:
$ ("#slidershow"). Карусель ({интервал: 3000});Фактически, когда мы настраиваем параметры для метода Carousel (), эффект карусели может быть автоматически переключен. Тем не менее, плагин Carousel в платформе начальной загрузки также предоставляет пользователям несколько специальных методов вызова, следующим образом:
• .carousel ("цикл"): играет слева направо;
• .carousel («Пауза»): остановить пейзаж;
• .carousel ("номер"): цикл до указанного кадра, индекс начинается с 0, аналогично массиву;
• .carousel ("prev"): вернуться к предыдущему кадру;
• .carousel ("Next"): следующий кадр
Например, метод предыдущего вызова, кнопки вперед и назад не могут работать должным образом. Фактически, их можно использовать для нормальной работы с помощью методов .carousel («Prev») и .carousele («Далее»). Код заключается в следующем:
$ (function () {$ ("#slidershow"). carousel ({interval: 2000}); $ ("#slidershow a.left"). Click (function () {$ (". Carousel"). Carousel ("prev");}); $ ("#slidershow a.ry "). Click (function () {$ (". Carousel "). Carousel (" Next ");});}); <! Doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <stleor> body {paddding: 10p; 10px;} </style> </head> <body> <div id = "carousel-example" data-ride = "carousel"> <!-индикаторы-> <ol> <li data-target = "#carousel-example example-slide-to =" 0 "> </li> <li data-target ="#example-example ". data-target = "#carousel-example" data-slide-to = "1"> </li> <li data-target = "#carousel-example" data-slide-to = "1"> </li> <li data-target = "#carousel-example"-slide-to = "2"> </li> </ol> <! src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" />div>....</div></div><div><img src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" />div>....</div></div><div><img src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" />div>....</div></div>! href = "#carousel-example" data-slide = "next"> <pan> </span> </a> </div> <!-<script> $ (function () {$ ('. carousel'). carousel ();}); </script>-> <script src = "js/jquery.min.js" src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>-> <!-<script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html>Wulin.com рекомендует темы, связанные с начальной загрузкой:
Навыки работы компонента начальной загрузки
Сводка знаний, связанных с начальной загрузкой
Выше приведено подробное объяснение использования примеров диаграммы вращения каруселей начальной загрузки, представленной вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!