Этот пример содержит всесторонний анализ использования карусели в начальной загрузке для вашей ссылки. Конкретный контент заключается в следующем
Файл исходного кода:
Carousel.scss
Carousel.js
Принцип реализации:
Скрыть все элементы, которые будут отображаться, а затем укажите, что текущий блок будет отображаться, ширина и высота адаптируются
Анализ исходного кода:
1. Структура HTML: в основном деленные на четыре части
1.1. Контейнер: самый внешний Div, требует, чтобы данные данных = «карусель», которая должна была быть указана в виде подключаемого модуля воспроизведения колеса, и обеспечивает идентификатор для облегчения ассоциации индикатора круга.
1.2. Часть списка изображений обернута внешним дивизоном, и тогда каждый IMG будет обернут дивизией, а класс обернут элементом.
1.3. Индикатор круга: используйте список OL, чтобы отобразить его графические элементы списка. Каждый элемент списка должен указать атрибут Data-Slide-To = ”Index”, который используется для обозначения номера индекса текущего круга.
1.4. Левые и левые кнопки управления: осознайте функцию перемещения влево и вправо
2. Стиль CSS
2.1. Карусель: есть только одна относительная марка позиционирования
2.2. Carousel-Inner: поверните область списка изображений, где каждый элемент имеет элемент, чтобы изменить его
2.2.1. Активные, следующие и предыдущие считаются видимыми.
2.2.2. Carousel-Caption: это означает, что каждый элемент должен иметь информацию о заголовке, а позиция по умолчанию отображается.
2.3. Карусель-контроль: устанавливает стиль левой и правой кнопки, которая будет устанавливать такую информацию, как градиент и прозрачность. Он предоставляет два дополнительных стиля: икона и значок и значок.
2.4. Карусель-индикаторы: стиль части круговой части абсолютно позиционируется. Каждый LI установлен как встроенный элемент блока. Используйте текстовый: -999, чтобы скрыть шрифт.
3. JS -код
3.1. Основным методом ядра является слайд, который осознает переключение изображений
3.1.1. Когда переключатель изображения впервые выполнен, метод паузы будет вызван для предварительного установления таймера. Только после завершения переключателя изображения будет вызван метод цикла для включения таймера.
3.1.2. Принял два параметра: тип и следующий
3.1.2.1. Тип: означает изменение страниц вверх или вниз
3.1.2.2. Далее: на этот раз он отображается как элемент активного элемента. Если он не передается, вам нужно использовать метод GetItemfordRection для его получения.
3.1.3. Получите основные параметры, такие как $ active (в настоящее время активный элемент), $ next (элемент, который должен быть активным элементом), Iscycling (дескриптор таймера для каруселя таймера), направление (направление) и другие основные параметры
3.1.4, затем запустите соревнование Slide.bs.carousele
3.1.5. Затем установите элемент индекса индикаторов
3.1.6. Переключить картинки. Если вы поддерживаете анимацию CSS, используйте анимацию для переключения. В противном случае добавьте CSS напрямую в переключение.
3.1.7. Принцип переключения анимации:
3.1.7.1. Предыдущая: это стиль, который будет объединен путем прокрутки изображения вправо: Активный правый (активный элемент) Правый (следующий элемент). В настоящее время сама прев
3.1.7.2. Далее: прокрутите изображение слева, а затем слева (следующий элемент). В настоящее время, сама по себе, на 100%, поместите изображение в крайнее право.
3.1.7.3. Активное право: картина должна быть справа, поэтому она должна перемещаться на 100% от ширины картинки.
3.1.7.4. Активные слева: изображение слева, затем ширина изображения должна быть заполнена -100%
3.1.7.5. Сравнительная картина:
3.1.8. Код реализации (за исключением CSS3):
.carousele-inner> .active, .carousele-inner> .next, .carousel-inner> .prev {display: block;}. Carousel-inner> .active {слева: 0;}. Carousel-inner> .next, .carousele-inner> .prev {позиция: Absolute; Верх: 0; Ширина: 100%;}. Carousel-inner> .next {слева: 100%;}. Carousel-inner> .prev {слева: -100%;}. Carousel-inner> .next.left, .carouseel-inner> .prev.rright {слева: 0;}. Carousel-inner> .left. .active.right {слева: 100%;}Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Замечательное обмен темами: jquery picture carousel javascript picture carousel bootstrap picture carousel
Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.