1
00:00:03,650 --> 00:00:09,125
تعلمنا للتو عن عنصر دائري في المحاضرة السابقة.

2
00:00:09,125 --> 00:00:14,324
في هذا التمرين، سنقوم بإضافة في دائري إلى

3
00:00:14,324 --> 00:00:20,760
صفحة index.html الخاصة بنا وفي هذه العملية تعلم كيفية عمل مكون دائري.

4
00:00:20,760 --> 00:00:24,090
الذهاب إلى صفحة index.html،

5
00:00:24,090 --> 00:00:29,640
سنضيف في صف جديد إلى div المحتوى،

6
00:00:29,640 --> 00:00:31,730
كالصف الأول في div.

7
00:00:31,730 --> 00:00:33,595
لذا سأذهب وأقول،

8
00:00:33,595 --> 00:00:43,535
أعطي صف صف الصف div وداخل هذا div،

9
00:00:43,535 --> 00:00:47,545
سنقوم بإنشاء مكون دائري.

10
00:00:47,545 --> 00:00:56,925
وفي ما هو div سأضيف في العمود الداخلي div،

11
00:00:56,925 --> 00:01:02,045
والذي سيحتوي على مكون دائري هنا.

12
00:01:02,045 --> 00:01:04,135
لإضافة في دائري،

13
00:01:04,135 --> 00:01:13,630
وهنا سوف أضيف في ديف مع معرف بلدي دائري و

14
00:01:13,630 --> 00:01:17,440
دائري فئة

15
00:01:17,440 --> 00:01:24,170
والشريحة وفئة ركوب البيانات.

16
00:01:24,170 --> 00:01:33,110
حتى تتمكن من رؤية مكون جافا سكريبت يدخل حيز التنفيذ هنا،

17
00:01:33,110 --> 00:01:42,420
ثم أغلق div والبدء في بناء دائري داخل هذا div هنا.

18
00:01:42,420 --> 00:01:44,995
لذلك، في هذه دائري،

19
00:01:44,995 --> 00:01:49,580
سنضيف في محتوى دائري المقبل.

20
00:01:49,580 --> 00:01:54,700
لذلك سأذهب ثم أضف div آخر مع الطبقة

21
00:01:56,740 --> 00:02:07,815
الدائرية الداخلية والدور كمربع قائمة.

22
00:02:07,815 --> 00:02:15,380
هذه هي الطريقة التي نبني بها دائري ثم نغلق ذلك div هناك.

23
00:02:15,380 --> 00:02:22,955
وداخل هذا div مرة أخرى سوف نقدم divs

24
00:02:22,955 --> 00:02:32,855
التي ستستضيف عناصر دائري من خلال تطبيق فئة عنصر دائري.

25
00:02:32,855 --> 00:02:37,120
وأول واحد في البند دائري...

26
00:02:37,240 --> 00:02:41,080
أول واحد في فئة دائري،

27
00:02:41,080 --> 00:02:42,595
وسوف أطبق الطبقة النشطة.

28
00:02:42,595 --> 00:02:48,235
لذلك هذا هو ديف الأول الذي يبدأ

29
00:02:48,235 --> 00:02:56,650
في احتواء شريحة البداية هناك والباقي منها، وأنا ذاهب لإضافة في.

30
00:02:56,650 --> 00:03:09,680
اسمحوا لي أن أضيف في اثنين من أكثر divs

31
00:03:09,680 --> 00:03:16,630
دائري البند هنا وتطبيق فقط الأول مع الطبقة النشطة.

32
00:03:16,630 --> 00:03:21,445
الآن أنا ذاهب لتقديم في المحتوى في هذه العناصر دائري.

33
00:03:21,445 --> 00:03:25,165
لذلك لبناء عنصر دائري،

34
00:03:25,165 --> 00:03:33,770
وسوف أذهب إلى هناك ومن ثم تضمين صورة مع فئة d كتلة.

35
00:03:33,770 --> 00:03:35,655
لذلك يتم استخدام

36
00:03:35,655 --> 00:03:43,930
هذا ل، وهذا هو فئة مرنة التي تسمح صورتنا ليتم وضعها بشكل صحيح ومن ثم إضافة في

37
00:03:43,930 --> 00:03:53,240
فئة السائل الصورة ثم المصدر كما img.

38
00:03:58,220 --> 00:04:03,595
لذلك ما سأفعله هو نقل هذا المحتوى

39
00:04:03,595 --> 00:04:09,020
من صفوف المحتوى الثلاثة أدناه ثم إضافته إلى دائري هنا.

40
00:04:15,470 --> 00:04:21,710
لذلك أقوم بإضافة صورة هنا ثم إلى دائري،

41
00:04:21,710 --> 00:04:23,340
يمكنني أيضًا إضافة

42
00:04:23,340 --> 00:04:28,200
div مع

43
00:04:28,200 --> 00:04:34,030
التسمية التوضيحية الدائرية للفئة.

44
00:04:34,030 --> 00:04:38,780
هنا يمكننا تضمين بعض النص الذي سيتم ترحيله كتعليق على الصورة.

45
00:04:38,780 --> 00:04:48,450
لذلك سأقول تعليق دائري د لا شيء، د مد-بلوك.

46
00:04:48,740 --> 00:04:52,555
ثم في الداخل هنا،

47
00:04:52,555 --> 00:04:59,490
سوف أقوم بتضمين المحتوى من صفوف المحتوى هنا.

48
00:04:59,490 --> 00:05:04,600
لذلك سوف أذهب ونسخ المحتوى من صفوف المحتوى

49
00:05:04,600 --> 00:05:14,330
هنا ثم لصق ذلك في كتلة التسمية التوضيحية دائري هنا.

50
00:05:25,320 --> 00:05:32,315
وسأزيل الفصل الذي قمنا بتطبيقه على H2 من هذا المحتوى.

51
00:05:32,315 --> 00:05:35,850
الآن، سنكرر نفس الشيء للاثنين المتبقيين عن طريق نسخ

52
00:05:35,850 --> 00:05:40,820
المحتوى من صفوف المحتوى أدناه هنا.

53
00:05:40,820 --> 00:05:43,645
لذلك، اسمحوا لي أن أكمل ذلك وبعد ذلك سوف نعود

54
00:05:43,645 --> 00:05:47,225
ونلقي نظرة على كيف تبدو دائري.

55
00:05:47,225 --> 00:05:49,940
هنا يمكنك أن ترى أنني قد أكملت

56
00:05:49,940 --> 00:05:56,440
العناصر دائري المتبقية هنا عن طريق نسخ المحتوى من صفوف المحتوى أدناه.

57
00:05:56,440 --> 00:06:04,190
دعونا نضيف في بعض فئات CSS بحيث يتم تنظيم دائري بشكل جيد.

58
00:06:04,190 --> 00:06:10,235
حتى الذهاب إلى ملف styles.css في الجزء السفلي هنا،

59
00:06:10,235 --> 00:06:17,410
وأنا ذاهب لإضافة في اثنين من أكثر الطبقات هنا.

60
00:06:17,410 --> 00:06:19,710
بالنسبة لفئة دائري،

61
00:06:19,710 --> 00:06:25,310
أود أن أضيف الخلفية باسم 512DA8،

62
00:06:25,310 --> 00:06:30,280
والتي استخدمناها قبل الطبقة الملونة الداكنة.

63
00:06:30,280 --> 00:06:39,825
ثم بالنسبة لفئة عنصر دائري،

64
00:06:39,825 --> 00:06:47,400
سأقوم بإضافة ارتفاع 300 بكسل.

65
00:06:48,030 --> 00:06:59,195
وبالنسبة للصورة التي يتم تضمينها داخل عنصر دائري،

66
00:06:59,195 --> 00:07:03,480
سأقوم بتطبيق بعض التحولات هنا.

67
00:07:03,480 --> 00:07:10,830
أود أن أقول، موقف مطلق.

68
00:07:10,830 --> 00:07:14,360
أريد أن أضعها على اليسار

69
00:07:19,470 --> 00:07:29,290
وبالتالي فإن هذا أعلى واليسار الصفر وضع هذه الصورة إلى الحافة اليسرى العليا من

70
00:07:29,290 --> 00:07:33,700
مربع دائري هناك ومع

71
00:07:33,700 --> 00:07:41,050
الحد الأدنى من الارتفاع تعيين إلى 300 بكسل لتتناسب مع ارتفاع العناصر الدائرية.

72
00:07:41,050 --> 00:07:45,680
لذلك هذه الصورة سوف تمتد أساسا ارتفاع كامل من

73
00:07:45,680 --> 00:07:51,020
دائري ولكن سيتم وضعها على الحافة اليسرى من مربع دائري هنا.

74
00:07:51,020 --> 00:07:52,820
لذلك اسمحوا لي أن حفظ التغييرات.

75
00:07:52,820 --> 00:07:58,235
سوف نذهب فقط ونلقي نظرة على ما تبدو عليه هذه دائري على صفحتنا على شبكة الإنترنت.

76
00:07:58,235 --> 00:07:59,770
الذهاب إلى صفحة الويب،

77
00:07:59,770 --> 00:08:05,460
يمكنك الآن أن ترى أن دائري في العمل على صفحة جدول دراسة الفهرس.

78
00:08:05,460 --> 00:08:09,000
حتى تتمكن من رؤية أن يتم

79
00:08:09,000 --> 00:08:13,905
وضع دائري في الجزء العلوي هنا وبعد ذلك سوف نستمر في التمرير على فترات منتظمة.

80
00:08:13,905 --> 00:08:16,470
لاحظ كيف باستخدام فئات CSS،

81
00:08:16,470 --> 00:08:21,925
قمت بتصميم الخلفية من دائري بحيث تكون التسميات التوضيحية

82
00:08:21,925 --> 00:08:24,745
مرئية بوضوح في دائري

83
00:08:24,745 --> 00:08:28,305
وكذلك كيف تم وضع الصورة على دائري.

84
00:08:28,305 --> 00:08:33,865
يتم إصلاح ارتفاع هذه الشريحة دائري في 300 بكسل.

85
00:08:33,865 --> 00:08:37,750
لذلك، وهذا يعطي تخطيط نظيفة لطيفة لهذه دائري.

86
00:08:37,750 --> 00:08:42,855
الآن، دعونا نضيف في بعض الضوابط لهذه دائري.

87
00:08:42,855 --> 00:08:46,155
العودة إلى index.html.

88
00:08:46,155 --> 00:08:56,015
مباشرة بعد دائري في مربع لدينا هنا ولكن لا يزال داخل دائري،

89
00:08:56,015 --> 00:09:05,170
وأنا ذاهب لإضافة في رأ لإدخال بعض الضوابط اليدوية لدائري.

90
00:09:05,170 --> 00:09:10,490
ومع فئة دائري المؤشرات. و

91
00:09:12,400 --> 00:09:16,570
ستوضع هذه المؤشرات

92
00:09:16,570 --> 00:09:24,095
في الشرائح الدائرية لبيان الشريحة المعينة التي يجري عرضها حاليا.

93
00:09:24,095 --> 00:09:28,760
لذلك اسمحوا لي أن أعرض في المحتوى هنا لذلك أقول OL،

94
00:09:28,760 --> 00:09:30,630
وأنا استخدم OL لهذا.

95
00:09:30,630 --> 00:09:34,175
ثم، داخل هناك يمكنني استخدام

96
00:09:34,175 --> 00:09:42,175
القائمة مع مجموعة البيانات المستهدفة إلى بلدي دائري.

97
00:09:42,175 --> 00:09:49,460
لذلك هذا هو معرف دائري والبيانات الشريحة إلى.

98
00:09:49,460 --> 00:09:55,880
وسوف تنزلق المؤشرات الأولى إلى الشريحة رقم صفر.

99
00:09:56,870 --> 00:10:08,080
مع هذه الفئة نشطة للعنصر الأول في هذه القائمة،

100
00:10:08,460 --> 00:10:18,870
ثم العنصرين المتبقيين أنا ذاهب ببساطة لاستخدام قائمة مع

101
00:10:18,870 --> 00:10:24,510
مجموعة البيانات المستهدفة يساوي دائري بلدي

102
00:10:24,510 --> 00:10:30,310
ويتم تعيين شريحة البيانات إلى واحد.

103
00:10:30,310 --> 00:10:33,150
لذلك، هذا هو للشريحة الثانية هناك.

104
00:10:33,150 --> 00:10:38,755
أنا فقط ذاهب لنسخ هذا واحد ومن ثم إنشاء مؤشر المؤشر الثالث هنا.

105
00:10:38,755 --> 00:10:47,740
لذلك سندخل وننسخ هذا ثم نغير هذا إلى شريحة البيانات إلى اثنين.

106
00:10:47,740 --> 00:10:54,685
لذلك لدينا شرائح مجانية في دائري لدينا لذلك ثلاثة مؤشرات كافية.

107
00:10:54,685 --> 00:10:58,540
الآن، سنقوم أيضا إضافة في اثنين من الضوابط إلى

108
00:10:58,540 --> 00:11:02,435
هذه دائري الذي يسمح لنا لتمرير يدويا دائري.

109
00:11:02,435 --> 00:11:06,580
للقيام بذلك، وسوف أعرض A مع

110
00:11:06,580 --> 00:11:13,705
فئة دائري التحكم السابق هنا.

111
00:11:13,705 --> 00:11:17,065
لذلك هذا من شأنه أن يسمح لي للذهاب إلى الشريحة السابقة،

112
00:11:17,065 --> 00:11:22,710
وجعل هريف يساوي ميكاروسيل،

113
00:11:22,710 --> 00:11:30,220
حتى تتمكن من رؤية أننا نحاول استهداف دائري هناك والدور هو زر.

114
00:11:30,220 --> 00:11:38,730
لذلك هذا سيكون بمثابة زر وشريحة البيانات كما كان سابقا.

115
00:11:38,730 --> 00:11:41,620
حتى ضمن هذا A،

116
00:11:44,530 --> 00:11:52,635
وسوف أعرض رمز

117
00:11:52,635 --> 00:11:55,810
لتمثيل هذا التحكم على الشاشة.

118
00:11:55,810 --> 00:12:01,310
لذلك، سأقول، تمتد فئة دائري التحكم - بريف-رمز

119
00:12:01,960 --> 00:12:12,560
وإغلاق فترة هنا.

120
00:12:12,560 --> 00:12:18,210
سأقوم الآن بنسخ عنصر التحكم هذا.

121
00:12:19,890 --> 00:12:28,950
ولصقه هنا ثم قم بإنشاء عنصر التحكم للشريحة التالية هنا لذلك أود أن أقول،

122
00:12:28,950 --> 00:12:34,440
تحكم دائري - التالي ولفة هو زر وشريحة البيانات المستخدمة

123
00:12:34,440 --> 00:12:41,315
في التالي وسيكون الرمز هو رمز دائري التحكم التالي.

124
00:12:41,315 --> 00:12:45,275
اذا اضف هذه الى دوراتي،

125
00:12:45,275 --> 00:12:49,595
دعنا نذهب ونلقي نظرة على دوارتنا في هذه اللحظة.

126
00:12:49,595 --> 00:12:51,395
الذهاب إلى دائري،

127
00:12:51,395 --> 00:12:57,325
يمكنك الآن أن ترى أنه في بلدي دائري لدي ثلاثة أزرار مؤشر هنا،

128
00:12:57,325 --> 00:13:02,830
والتي تشير إلى أي شريحة معينة

129
00:13:02,830 --> 00:13:08,085
مرئية حاليا في بلدي دائري والشرائح الشريحة،

130
00:13:08,085 --> 00:13:11,380
ثم المؤشر أيضا يتغير في المقابل

131
00:13:11,380 --> 00:13:15,150
للإشارة إلى أي شريحة معينة مرئية.

132
00:13:15,150 --> 00:13:21,810
يمكنني النقر يدويا على واحد منهم والذهاب إلى شريحة محددة في دائري.

133
00:13:21,810 --> 00:13:26,320
ليس هذا فقط، يمكنك أن ترى أن هناك الآن اثنين من المؤشرات،

134
00:13:26,320 --> 00:13:27,980
اليسار واليمين،

135
00:13:27,980 --> 00:13:32,120
والتي يمكنني استخدامها مرة أخرى التمرير من خلال دائري من خلال

136
00:13:32,120 --> 00:13:36,715
النقر على هذه المؤشرات هنا.

137
00:13:36,715 --> 00:13:38,490
حتى باستخدام هذه الضوابط،

138
00:13:38,490 --> 00:13:43,660
كل من السيطرة السابقة والقادمة والمؤشرات هنا،

139
00:13:43,660 --> 00:13:51,155
يمكنني الانتقال إلى الشريحة المحددة في بلدي دائري.

140
00:13:51,155 --> 00:13:53,635
و هذا يكمل هذا التمرين.

141
00:13:53,635 --> 00:13:59,350
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع دائري الرسالة.