[MUSIC]
Многие компоненты на основе JavaScript Bootstrap предоставляют нам механизм
для управления некоторыми функциями этих компонентов путем написания кода JavaScript,
в частности, путем написания кода Использование синтаксиса jQuery.
Таким образом, мы собираемся изучить это упражнение индекса, используя некоторые
элементы управления на основе JavaScript для нашей Карусели, которые мы
включили на странице index.html в предыдущем упражнении.
В предыдущем упражнении мы ввели эту карусель на нашу страницу index.html.
То, что я хотел бы сделать в этом упражнении, это ввести пару
кнопок управления в эту Карусель, а
затем использовать JavaScript, чтобы иметь возможность активировать эти кнопки.
Кнопки будут использоваться для паузы и
воспроизведения скользящего действия этой Карусели.
Таким образом, включая кнопку в нашей Карусели здесь,
мы можем нажать кнопку, чтобы остановить скользящее действие Карусели, а
затем мы можем нажать другую кнопку, чтобы возобновить скользящее действие Карусели.
Итак, это то, что мы можем изучить в этом упражнении.
Чтобы начать работу с этим упражнением, мы перейдем на страницу index.html.
И сразу после левого и правого управления нашей Карусели,
я введу div с группой кнопок класса.
Таким образом, это заключит группу кнопок из двух кнопок здесь, а затем с идентификатором
CarouselButton и
закрыть div там.
Теперь, внутри этого, я собираюсь добавить две кнопки.
Поэтому позвольте мне добавить одну кнопку с классом btn, btn-danger,
btn-small и
id карусельной паузы.
Так что это будет действовать как кнопка паузы, замедляет кнопку там.
И для этой кнопки я собираюсь ввести
шрифт как значок с классом fa fa
, паузу и закрыть промежуток.
Таким образом, это вводит кнопку паузы в группу кнопок Карусели.
Я собираюсь скопировать это и вставить его снова, чтобы создать другую кнопку.
Эта вторая кнопка, я назову btn btn-sm, и
тогда это будет карусельная игра.
И класс пролета,
кнопка будет, если она будет играть здесь.
Предположим, изменения и пойдем и быстро посмотрим на него на веб-странице.
Взглянув на кнопки, как они существуют в нашем браузере, вы можете увидеть, что
эти две кнопки теперь расположены в левом углу моей Карусели.
Я хотел бы переместить эти кнопки на правый край, чтобы
это не вызывало это синее, пустое пространство под изображением здесь.
Поэтому позвольте мне использовать пару свойств CSS, чтобы переместить эти кнопки
в правый столбец Carousel.
Перейдя к этому стилю, запустите файл CSS,
позвольте мне ввести здесь код CSS.
Поэтому для элемента с идентификатором CarouselButtons
я позиционирую его по правому краю и внизу, 0 пикселей здесь.
Таким образом, эти два, а затем положение абсолютное.
Так что это поместит эти кнопки в правый угол моей Карусели.
Очевидно, что просто введение кнопок в Карусель не будет служить
никакой цели.
Теперь мы собираемся воспользоваться элементами управления JavaScript, которые
предоставляет Карусель, написав немного кода jQuery в
нижней части страницы index.html, чтобы заставить эти кнопки выполнять свою работу.
Мы хотим иметь возможность сделать паузу и возобновить скользящее действие моей Карусели.
Перейдя к нижней части страницы index.html, позвольте мне представить здесь какой-то скрипт.
Таким образом, этот скрипт должен содержать
код JavaScript, написанный в синтаксисе jQuery.
Так что я собираюсь сказать,
$ (document) .ready (function), И
эта функция должна содержать пару
функций здесь для активации кнопок.
Так что я бы сказал, микарусель.
Это идентификатор карусели, что мы вводим,
так что мы бы сказали, карусель,
Интервал: 2000.
Таким образом, это устанавливает интервал скольжения Карусели
до 2000 миллисекунд или 2 секунд.
Так что я делаю это немного быстрее,
чтобы скользящие действия проходили в Карусели.
Продолжайте использовать код jQuery здесь.
Теперь я активирую кнопку паузы, так что скажу карусель-пауза.
Так что это идентификатор, который я дал кнопке паузы там.
Поэтому я хочу активировать кнопку паузы.
Поэтому я говорю, когда пользователь нажимает.
Таким образом, вы можете увидеть, как читать синтаксис.
Таким образом, это говорит, что для кнопки
карусельной паузы, если действие клика выполняется пользователем, затем выполните
эту конкретную функцию, которую я указываю внутри этого кода здесь.
Что такое функция, которую я хочу сделать?
Я хочу быть в состоянии,
Пауза Карусель.
Так мы бы сказали, карусель («пауза»).
Итак, теперь вы видите, как вы использовали элементы управления на основе JQuery.
Элементы управления JavaScript, которые даны для компонента Bootstrap Carousel и
написаны некоторый код, чтобы иметь возможность контролировать Карусель.
Аналогично, я хочу иметь возможность активировать кнопку воспроизведения.
Поэтому, когда кнопка воспроизведения нажата,
я хочу, чтобы скользящее действие Карусели возобновилось.
Поэтому я просто скопирую этот код, вставьте его туда.
И тогда я бы сказал, карусельная игра,
нажмите функцию моей карусели, а затем функция говорит карусель («цикл»).
Так вы указываете, что Карусель
должна возобновить скольжение, как раньше.
Итак, эта функция, которую мы прикрепляем к кнопке воспроизведения здесь.
Таким образом, с этими двумя,
наша функция введена внутри этой функции готового документа.
Вы все настроены, чтобы Карусель была активирована,
и две кнопки, чтобы управлять поведением нашей Карусели.
Итак, давайте покажем изменения и посмотрим на поведение нашей Карусели.
Перейдя на нашу страницу, вы видите, что ваша карусель движется очень быстро,
потому что я установил интервал в 2 000 миллисекунд или 2 секунды.
Таким образом, каждые две секунды вы увидите скользящее действие Карусели.
Это определенно раздражает.
Поэтому позвольте мне сделать паузу, нажав на кнопку паузы.
Поэтому, когда вы нажимаете на кнопку паузы, скользящее действие карусели приостанавливается.
Потому что, когда вы нажимаете на кнопку паузы, то функция, которую мы
ввели в код JavaScript, вступает в действие, а
затем приостанавливает движение Карусели.
Теперь, если вы хотите возобновить, нажмите на кнопку воспроизведения, а
затем Карусель должна возобновить свое движение.
Как вы можете видеть, когда вы нажимаете на кнопку воспроизведения, карусель начинает двигаться.
Теперь, конечно, вы можете улучшить то, как вы создаете эти кнопки и так далее,
но это простой способ, который мы можем ввести для управления нашей Каруселью.
Это упражнение иллюстрирует вам, как мы можем использовать код JavaScript,
чтобы иметь возможность контролировать наши компоненты на основе Bootstrap JavaScript.
Это хорошее время, чтобы сделать комментарий
вашего кода с сообщением Bootstrap jQuery.
[ МУЗЫКА]