Давайте посмотрим на эффект карусели с изображением начальной загрузки:
Вышеупомянутое влияние, разделяемое всеми, но это домашняя страница облачной музыки Netease.
Не забудьте сначала появиться в официальной библиотеке управления iOS7, и Android также добавил это представление в определенную версию. Дизайн универсален. Bootstrap3 также поддерживает использование таких эффектов в Интернете.
Далее, простой анализ:
1. Структурный анализ
Картина каруселя в основном включает в себя три части:
☑ Карусельные картинки
☑ Счетчик для картин каруселей
☑ Контроллер для картин каруселей
Шаг 1: Проектируйте контейнер для картин каруселей. Стиль карусели принимается в рамках начальной загрузки, и для этого контейнера определяется значение идентификатора, так что атрибут данных используется для объявления триггера позже.
Скопируйте код следующим образом: <div id = "slidershow"> </div>
Шаг 2: Проектируйте счетчик картин карусели. Добавьте калькулятор изображения каруселей в контейнер Div.Carouseel, используя стиль карусели-индикаторов. Его основная функция - отобразить порядок воспроизведения текущей картинки (есть несколько изображений, и следующие приведены те же списки, как правило, используются для его создания:
<div id = "slidershow"> <!-Установите порядок каруселей изображения-> <ol> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ol> </div>
Шаг 3: Проектируйте область воспроизведения картинки каруселей. Во всем эффекте изображения карусели область воспроизведения является наиболее важной областью, которая в основном используется для размещения картинок, которые необходимо метить. Эта область контролируется с использованием стиля карусели-иннерного, а также помещается в контейнер карусели, и каждое изображение карусели размещается через контейнер из элемента:
<div id = "slidershow"> <!-Установите порядок каруселей изображения-> <ol> <li> 1 </li>… </ol> <!-Установите картинки каруселей-> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145.jpg. </div> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div>… <Div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div>… <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"> </a> </div> </div> </div>
Шаг 4: Установите описание изображения каруселей. Многие эффекты изображения каруселей также имеют свой собственный заголовок и содержание описания на каждой картине. На самом деле, карусель в сайте начальной загрузки также обеспечивает аналогичные эффекты. Просто добавьте соответствующий код в нижней части изображения в элементе.
<div id = "slidershow"> <!-Установите порядок каруселей изображения-> <ol> <li> 1 </li>… </ol> <!-Установить картинки каруселей-> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145.j.jpg35.j.s. Картинка Соответствует заголовок и описание Содержание-> <div> <h3> Название изображения </h3> <p> Содержимое описания ... </p> </div> </div>… </div> </div>
Шаг 5: Проектируйте контроллер изображения каруселей. Много раз картинки Carousel также имеют контроллер, который играет вперед и назад. В карусели это достигается путем сочетания левого и правого с стилем контроля каруселей. Там, где слева означает воспроизведение вперед, вправо означает воспроизведение назад. Он также помещается в контейнер карусели:
<div id = "slidershow"> <!-Установите порядок каруселей изображения-> <ol>… </ol> <!-Установите картинки каруселей-> <div>… </div> <!-Установите контроллер изображения каруселей-> <a href = ""> <pran> </span> </a> <a href = ""> <pan> </span> </span> </a> <a href = "
2. Процесс реализации
<div id = "Carousel-example-Generic" data-ride = "carousel"> <!-Индикаторы-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "#carousel-example-generic" data-to-to-to "1"> </li> <li> <li> <li> <li> <li> <li> <li data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <!-обертка для слайдов-> <div role = "listbox"> <div> <img src = "..."> <div> ... </div> </div> <div> <img src = "... <> div> ... </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> ... <!-- Controls --> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span></span> <span>Previous</span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span></span> <span>Next</span> </a></div>
Разделен на три части
1. Индикатор
Одна часть - маленькая точка ниже ... это индикатор
Класс OL используется для создания этого индикатора
Каждый атрибут Data-Slide-To = "0" используется для руководства местоположением для определения состояния активации по умолчанию.
элемент
<div> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
Там нет ожидания, просто заполните заголовок и содержание изображения
2. левый и левый контроллеры
Код выглядит следующим образом
<a href="#myCarousel" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#myCarousel" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next</span> </a>
Операция в JavaScript
инициализация
$ ('. Carousel'). Carousel ({интервал: 2000})Провести петлю
.carousel ('цикл')
пауза
.carousel ('пауза')
Позиционирование до определенного элемента начинается с 0
.carouseel (номер)
Предыдущий
.carouseel ('prev')
Следующий
.carouseel ('next')
Больше контента о начальной загрузке также можно найти по специальным темам: «Учебное пособие по обучению Bootstrap»
Выше приведено подробное введение в JavaScript Picture Carousel. Я надеюсь, что эта статья будет полезна всем в изучении программирования JavaScript.