1
00:00:00,000 --> 00:00:04,523
[MUSIC]

2
00:00:04,523 --> 00:00:10,934
Многие компоненты на основе JavaScript Bootstrap предоставляют нам механизм

3
00:00:10,934 --> 00:00:17,070
для управления некоторыми функциями этих компонентов путем написания кода JavaScript,

4
00:00:17,070 --> 00:00:21,510
в частности, путем написания кода Использование синтаксиса jQuery.

5
00:00:21,510 --> 00:00:26,181
Таким образом, мы собираемся изучить это упражнение индекса, используя некоторые

6
00:00:26,181 --> 00:00:30,561
элементы управления на основе JavaScript для нашей Карусели, которые мы

7
00:00:30,561 --> 00:00:35,537
включили на странице index.html в предыдущем упражнении.

8
00:00:37,171 --> 00:00:42,810
В предыдущем упражнении мы ввели эту карусель на нашу страницу index.html.

9
00:00:42,810 --> 00:00:47,260
То, что я хотел бы сделать в этом упражнении, это ввести пару

10
00:00:47,260 --> 00:00:50,240
кнопок управления в эту Карусель, а

11
00:00:50,240 --> 00:00:54,920
затем использовать JavaScript, чтобы иметь возможность активировать эти кнопки.

12
00:00:54,920 --> 00:00:57,850
Кнопки будут использоваться для паузы и

13
00:00:57,850 --> 00:01:03,350
воспроизведения скользящего действия этой Карусели.

14
00:01:03,350 --> 00:01:08,410
Таким образом, включая кнопку в нашей Карусели здесь,

15
00:01:08,410 --> 00:01:13,000
мы можем нажать кнопку, чтобы остановить скользящее действие Карусели, а

16
00:01:13,000 --> 00:01:18,070
затем мы можем нажать другую кнопку, чтобы возобновить скользящее действие Карусели.

17
00:01:18,070 --> 00:01:21,390
Итак, это то, что мы можем изучить в этом упражнении.

18
00:01:22,520 --> 00:01:26,920
Чтобы начать работу с этим упражнением, мы перейдем на страницу index.html.

19
00:01:26,920 --> 00:01:32,420
И сразу после левого и правого управления нашей Карусели,

20
00:01:32,420 --> 00:01:40,400
я введу div с группой кнопок класса.

21
00:01:40,400 --> 00:01:47,023
Таким образом, это заключит группу кнопок из двух кнопок здесь, а затем с идентификатором

22
00:01:50,699 --> 00:01:54,224
CarouselButton и

23
00:01:54,224 --> 00:01:59,290
закрыть div там.

24
00:01:59,290 --> 00:02:03,530
Теперь, внутри этого, я собираюсь добавить две кнопки.

25
00:02:03,530 --> 00:02:12,385
Поэтому позвольте мне добавить одну кнопку с классом btn, btn-danger,

26
00:02:12,385 --> 00:02:16,910
btn-small и

27
00:02:16,910 --> 00:02:24,030
id карусельной паузы.

28
00:02:24,030 --> 00:02:30,970
Так что это будет действовать как кнопка паузы, замедляет кнопку там.

29
00:02:30,970 --> 00:02:36,600
И для этой кнопки я собираюсь ввести

30
00:02:36,600 --> 00:02:41,201
шрифт как значок с классом fa fa

31
00:02:42,923 --> 00:02:49,410
, паузу и закрыть промежуток.

32
00:02:49,410 --> 00:02:55,790
Таким образом, это вводит кнопку паузы в группу кнопок Карусели.

33
00:02:55,790 --> 00:03:04,450
Я собираюсь скопировать это и вставить его снова, чтобы создать другую кнопку.

34
00:03:04,450 --> 00:03:09,368
Эта вторая кнопка, я назову btn btn-sm, и

35
00:03:09,368 --> 00:03:12,259
тогда это будет карусельная игра.

36
00:03:13,300 --> 00:03:17,580
И класс пролета,

37
00:03:17,580 --> 00:03:21,660
кнопка будет, если она будет играть здесь.

38
00:03:23,940 --> 00:03:27,965
Предположим, изменения и пойдем и быстро посмотрим на него на веб-странице.

39
00:03:29,180 --> 00:03:34,850
Взглянув на кнопки, как они существуют в нашем браузере, вы можете увидеть, что

40
00:03:34,850 --> 00:03:39,940
эти две кнопки теперь расположены в левом углу моей Карусели.

41
00:03:40,970 --> 00:03:44,660
Я хотел бы переместить эти кнопки на правый край, чтобы

42
00:03:44,660 --> 00:03:51,700
это не вызывало это синее, пустое пространство под изображением здесь.

43
00:03:51,700 --> 00:03:56,410
Поэтому позвольте мне использовать пару свойств CSS, чтобы переместить эти кнопки

44
00:03:56,410 --> 00:03:59,230
в правый столбец Carousel.

45
00:04:00,760 --> 00:04:04,140
Перейдя к этому стилю, запустите файл CSS,

46
00:04:04,140 --> 00:04:08,440
позвольте мне ввести здесь код CSS.

47
00:04:08,440 --> 00:04:14,166
Поэтому для элемента с идентификатором CarouselButtons

48
00:04:14,166 --> 00:04:18,880
я позиционирую его по правому краю и внизу, 0 пикселей здесь.

49
00:04:18,880 --> 00:04:22,280
Таким образом, эти два, а затем положение абсолютное.

50
00:04:22,280 --> 00:04:28,300
Так что это поместит эти кнопки в правый угол моей Карусели.

51
00:04:29,710 --> 00:04:34,280
Очевидно, что просто введение кнопок в Карусель не будет служить

52
00:04:34,280 --> 00:04:35,420
никакой цели.

53
00:04:35,420 --> 00:04:40,330
Теперь мы собираемся воспользоваться элементами управления JavaScript, которые

54
00:04:40,330 --> 00:04:46,310
предоставляет Карусель, написав немного кода jQuery в

55
00:04:46,310 --> 00:04:52,204
нижней части страницы index.html, чтобы заставить эти кнопки выполнять свою работу.

56
00:04:52,204 --> 00:04:57,950
Мы хотим иметь возможность сделать паузу и возобновить скользящее действие моей Карусели.

57
00:04:58,970 --> 00:05:06,830
Перейдя к нижней части страницы index.html, позвольте мне представить здесь какой-то скрипт.

58
00:05:06,830 --> 00:05:10,980
Таким образом, этот скрипт должен содержать

59
00:05:10,980 --> 00:05:15,750
код JavaScript, написанный в синтаксисе jQuery.

60
00:05:15,750 --> 00:05:19,088
Так что я собираюсь сказать,

61
00:05:19,088 --> 00:05:28,664
$ (document) .ready (function), И

62
00:05:28,664 --> 00:05:33,814
эта функция должна содержать пару

63
00:05:33,814 --> 00:05:39,320
функций здесь для активации кнопок.

64
00:05:39,320 --> 00:05:45,430
Так что я бы сказал, микарусель.

65
00:05:45,430 --> 00:05:50,427
Это идентификатор карусели, что мы вводим,

66
00:05:50,427 --> 00:05:53,099
так что мы бы сказали, карусель,

67
00:05:56,960 --> 00:06:01,804
Интервал: 2000.

68
00:06:01,804 --> 00:06:06,720
Таким образом, это устанавливает интервал скольжения Карусели

69
00:06:06,720 --> 00:06:10,130
до 2000 миллисекунд или 2 секунд.

70
00:06:10,130 --> 00:06:12,890
Так что я делаю это немного быстрее,

71
00:06:12,890 --> 00:06:16,330
чтобы скользящие действия проходили в Карусели.

72
00:06:16,330 --> 00:06:20,430
Продолжайте использовать код jQuery здесь.

73
00:06:20,430 --> 00:06:26,835
Теперь я активирую кнопку паузы, так что скажу карусель-пауза.

74
00:06:26,835 --> 00:06:34,960
Так что это идентификатор, который я дал кнопке паузы там.

75
00:06:34,960 --> 00:06:38,720
Поэтому я хочу активировать кнопку паузы.

76
00:06:38,720 --> 00:06:40,980
Поэтому я говорю, когда пользователь нажимает.

77
00:06:40,980 --> 00:06:42,920
Таким образом, вы можете увидеть, как читать синтаксис.

78
00:06:42,920 --> 00:06:47,470
Таким образом, это говорит, что для кнопки

79
00:06:47,470 --> 00:06:53,510
карусельной паузы, если действие клика выполняется пользователем, затем выполните

80
00:06:53,510 --> 00:07:01,000
эту конкретную функцию, которую я указываю внутри этого кода здесь.

81
00:07:01,000 --> 00:07:03,140
Что такое функция, которую я хочу сделать?

82
00:07:03,140 --> 00:07:05,324
Я хочу быть в состоянии,

83
00:07:09,144 --> 00:07:15,200
Пауза Карусель.

84
00:07:15,200 --> 00:07:20,665
Так мы бы сказали, карусель («пауза»).

85
00:07:21,860 --> 00:07:29,884
Итак, теперь вы видите, как вы использовали элементы управления на основе JQuery.

86
00:07:29,884 --> 00:07:36,020
Элементы управления JavaScript, которые даны для компонента Bootstrap Carousel и

87
00:07:36,020 --> 00:07:41,611
написаны некоторый код, чтобы иметь возможность контролировать Карусель.

88
00:07:41,611 --> 00:07:46,060
Аналогично, я хочу иметь возможность активировать кнопку воспроизведения.

89
00:07:46,060 --> 00:07:48,410
Поэтому, когда кнопка воспроизведения нажата,

90
00:07:48,410 --> 00:07:52,380
я хочу, чтобы скользящее действие Карусели возобновилось.

91
00:07:52,380 --> 00:07:56,950
Поэтому я просто скопирую этот код, вставьте его туда.

92
00:07:56,950 --> 00:08:00,720
И тогда я бы сказал, карусельная игра,

93
00:08:00,720 --> 00:08:07,130
нажмите функцию моей карусели, а затем функция говорит карусель («цикл»).

94
00:08:07,130 --> 00:08:12,477
Так вы указываете, что Карусель

95
00:08:12,477 --> 00:08:16,850
должна возобновить скольжение, как раньше.

96
00:08:16,850 --> 00:08:21,620
Итак, эта функция, которую мы прикрепляем к кнопке воспроизведения здесь.

97
00:08:21,620 --> 00:08:23,380
Таким образом, с этими двумя,

98
00:08:23,380 --> 00:08:28,800
наша функция введена внутри этой функции готового документа.

99
00:08:28,800 --> 00:08:33,870
Вы все настроены, чтобы Карусель была активирована,

100
00:08:33,870 --> 00:08:38,690
и две кнопки, чтобы управлять поведением нашей Карусели.

101
00:08:38,690 --> 00:08:43,240
Итак, давайте покажем изменения и посмотрим на поведение нашей Карусели.

102
00:08:44,570 --> 00:08:50,084
Перейдя на нашу страницу, вы видите, что ваша карусель движется очень быстро,

103
00:08:50,084 --> 00:08:55,603
потому что я установил интервал в 2 000 миллисекунд или 2 секунды.

104
00:08:55,603 --> 00:08:59,640
Таким образом, каждые две секунды вы увидите скользящее действие Карусели.

105
00:08:59,640 --> 00:09:01,380
Это определенно раздражает.

106
00:09:01,380 --> 00:09:05,410
Поэтому позвольте мне сделать паузу, нажав на кнопку паузы.

107
00:09:05,410 --> 00:09:11,080
Поэтому, когда вы нажимаете на кнопку паузы, скользящее действие карусели приостанавливается.

108
00:09:11,080 --> 00:09:15,080
Потому что, когда вы нажимаете на кнопку паузы, то функция, которую мы

109
00:09:16,820 --> 00:09:21,360
ввели в код JavaScript, вступает в действие, а

110
00:09:21,360 --> 00:09:24,520
затем приостанавливает движение Карусели.

111
00:09:24,520 --> 00:09:28,354
Теперь, если вы хотите возобновить, нажмите на кнопку воспроизведения, а

112
00:09:28,354 --> 00:09:31,980
затем Карусель должна возобновить свое движение.

113
00:09:31,980 --> 00:09:37,044
Как вы можете видеть, когда вы нажимаете на кнопку воспроизведения, карусель начинает двигаться.

114
00:09:37,044 --> 00:09:43,125
Теперь, конечно, вы можете улучшить то, как вы создаете эти кнопки и так далее,

115
00:09:43,125 --> 00:09:48,350
но это простой способ, который мы можем ввести для управления нашей Каруселью.

116
00:09:50,110 --> 00:09:55,400
Это упражнение иллюстрирует вам, как мы можем использовать код JavaScript,

117
00:09:55,400 --> 00:10:00,650
чтобы иметь возможность контролировать наши компоненты на основе Bootstrap JavaScript.

118
00:10:00,650 --> 00:10:03,933
Это хорошее время, чтобы сделать комментарий

119
00:10:03,933 --> 00:10:08,365
вашего кода с сообщением Bootstrap jQuery.

120
00:10:08,365 --> 00:10:14,422
[ МУЗЫКА]