تعلمنا للتو عن عنصر دائري في المحاضرة السابقة.
في هذا التمرين، سنقوم بإضافة في دائري إلى
صفحة index.html الخاصة بنا وفي هذه العملية تعلم كيفية عمل مكون دائري.
الذهاب إلى صفحة index.html،
سنضيف في صف جديد إلى div المحتوى،
كالصف الأول في div.
لذا سأذهب وأقول،
أعطي صف صف الصف div وداخل هذا div،
سنقوم بإنشاء مكون دائري.
وفي ما هو div سأضيف في العمود الداخلي div،
والذي سيحتوي على مكون دائري هنا.
لإضافة في دائري،
وهنا سوف أضيف في ديف مع معرف بلدي دائري و
دائري فئة
والشريحة وفئة ركوب البيانات.
حتى تتمكن من رؤية مكون جافا سكريبت يدخل حيز التنفيذ هنا،
ثم أغلق div والبدء في بناء دائري داخل هذا div هنا.
لذلك، في هذه دائري،
سنضيف في محتوى دائري المقبل.
لذلك سأذهب ثم أضف div آخر مع الطبقة
الدائرية الداخلية والدور كمربع قائمة.
هذه هي الطريقة التي نبني بها دائري ثم نغلق ذلك div هناك.
وداخل هذا div مرة أخرى سوف نقدم divs
التي ستستضيف عناصر دائري من خلال تطبيق فئة عنصر دائري.
وأول واحد في البند دائري...
أول واحد في فئة دائري،
وسوف أطبق الطبقة النشطة.
لذلك هذا هو ديف الأول الذي يبدأ
في احتواء شريحة البداية هناك والباقي منها، وأنا ذاهب لإضافة في.
اسمحوا لي أن أضيف في اثنين من أكثر divs
دائري البند هنا وتطبيق فقط الأول مع الطبقة النشطة.
الآن أنا ذاهب لتقديم في المحتوى في هذه العناصر دائري.
لذلك لبناء عنصر دائري،
وسوف أذهب إلى هناك ومن ثم تضمين صورة مع فئة d كتلة.
لذلك يتم استخدام
هذا ل، وهذا هو فئة مرنة التي تسمح صورتنا ليتم وضعها بشكل صحيح ومن ثم إضافة في
فئة السائل الصورة ثم المصدر كما img.
لذلك ما سأفعله هو نقل هذا المحتوى
من صفوف المحتوى الثلاثة أدناه ثم إضافته إلى دائري هنا.
لذلك أقوم بإضافة صورة هنا ثم إلى دائري،
يمكنني أيضًا إضافة
div مع
التسمية التوضيحية الدائرية للفئة.
هنا يمكننا تضمين بعض النص الذي سيتم ترحيله كتعليق على الصورة.
لذلك سأقول تعليق دائري د لا شيء، د مد-بلوك.
ثم في الداخل هنا،
سوف أقوم بتضمين المحتوى من صفوف المحتوى هنا.
لذلك سوف أذهب ونسخ المحتوى من صفوف المحتوى
هنا ثم لصق ذلك في كتلة التسمية التوضيحية دائري هنا.
وسأزيل الفصل الذي قمنا بتطبيقه على H2 من هذا المحتوى.
الآن، سنكرر نفس الشيء للاثنين المتبقيين عن طريق نسخ
المحتوى من صفوف المحتوى أدناه هنا.
لذلك، اسمحوا لي أن أكمل ذلك وبعد ذلك سوف نعود
ونلقي نظرة على كيف تبدو دائري.
هنا يمكنك أن ترى أنني قد أكملت
العناصر دائري المتبقية هنا عن طريق نسخ المحتوى من صفوف المحتوى أدناه.
دعونا نضيف في بعض فئات CSS بحيث يتم تنظيم دائري بشكل جيد.
حتى الذهاب إلى ملف styles.css في الجزء السفلي هنا،
وأنا ذاهب لإضافة في اثنين من أكثر الطبقات هنا.
بالنسبة لفئة دائري،
أود أن أضيف الخلفية باسم 512DA8،
والتي استخدمناها قبل الطبقة الملونة الداكنة.
ثم بالنسبة لفئة عنصر دائري،
سأقوم بإضافة ارتفاع 300 بكسل.
وبالنسبة للصورة التي يتم تضمينها داخل عنصر دائري،
سأقوم بتطبيق بعض التحولات هنا.
أود أن أقول، موقف مطلق.
أريد أن أضعها على اليسار
وبالتالي فإن هذا أعلى واليسار الصفر وضع هذه الصورة إلى الحافة اليسرى العليا من
مربع دائري هناك ومع
الحد الأدنى من الارتفاع تعيين إلى 300 بكسل لتتناسب مع ارتفاع العناصر الدائرية.
لذلك هذه الصورة سوف تمتد أساسا ارتفاع كامل من
دائري ولكن سيتم وضعها على الحافة اليسرى من مربع دائري هنا.
لذلك اسمحوا لي أن حفظ التغييرات.
سوف نذهب فقط ونلقي نظرة على ما تبدو عليه هذه دائري على صفحتنا على شبكة الإنترنت.
الذهاب إلى صفحة الويب،
يمكنك الآن أن ترى أن دائري في العمل على صفحة جدول دراسة الفهرس.
حتى تتمكن من رؤية أن يتم
وضع دائري في الجزء العلوي هنا وبعد ذلك سوف نستمر في التمرير على فترات منتظمة.
لاحظ كيف باستخدام فئات CSS،
قمت بتصميم الخلفية من دائري بحيث تكون التسميات التوضيحية
مرئية بوضوح في دائري
وكذلك كيف تم وضع الصورة على دائري.
يتم إصلاح ارتفاع هذه الشريحة دائري في 300 بكسل.
لذلك، وهذا يعطي تخطيط نظيفة لطيفة لهذه دائري.
الآن، دعونا نضيف في بعض الضوابط لهذه دائري.
العودة إلى index.html.
مباشرة بعد دائري في مربع لدينا هنا ولكن لا يزال داخل دائري،
وأنا ذاهب لإضافة في رأ لإدخال بعض الضوابط اليدوية لدائري.
ومع فئة دائري المؤشرات. و
ستوضع هذه المؤشرات
في الشرائح الدائرية لبيان الشريحة المعينة التي يجري عرضها حاليا.
لذلك اسمحوا لي أن أعرض في المحتوى هنا لذلك أقول OL،
وأنا استخدم OL لهذا.
ثم، داخل هناك يمكنني استخدام
القائمة مع مجموعة البيانات المستهدفة إلى بلدي دائري.
لذلك هذا هو معرف دائري والبيانات الشريحة إلى.
وسوف تنزلق المؤشرات الأولى إلى الشريحة رقم صفر.
مع هذه الفئة نشطة للعنصر الأول في هذه القائمة،
ثم العنصرين المتبقيين أنا ذاهب ببساطة لاستخدام قائمة مع
مجموعة البيانات المستهدفة يساوي دائري بلدي
ويتم تعيين شريحة البيانات إلى واحد.
لذلك، هذا هو للشريحة الثانية هناك.
أنا فقط ذاهب لنسخ هذا واحد ومن ثم إنشاء مؤشر المؤشر الثالث هنا.
لذلك سندخل وننسخ هذا ثم نغير هذا إلى شريحة البيانات إلى اثنين.
لذلك لدينا شرائح مجانية في دائري لدينا لذلك ثلاثة مؤشرات كافية.
الآن، سنقوم أيضا إضافة في اثنين من الضوابط إلى
هذه دائري الذي يسمح لنا لتمرير يدويا دائري.
للقيام بذلك، وسوف أعرض A مع
فئة دائري التحكم السابق هنا.
لذلك هذا من شأنه أن يسمح لي للذهاب إلى الشريحة السابقة،
وجعل هريف يساوي ميكاروسيل،
حتى تتمكن من رؤية أننا نحاول استهداف دائري هناك والدور هو زر.
لذلك هذا سيكون بمثابة زر وشريحة البيانات كما كان سابقا.
حتى ضمن هذا A،
وسوف أعرض رمز
لتمثيل هذا التحكم على الشاشة.
لذلك، سأقول، تمتد فئة دائري التحكم - بريف-رمز
وإغلاق فترة هنا.
سأقوم الآن بنسخ عنصر التحكم هذا.
ولصقه هنا ثم قم بإنشاء عنصر التحكم للشريحة التالية هنا لذلك أود أن أقول،
تحكم دائري - التالي ولفة هو زر وشريحة البيانات المستخدمة
في التالي وسيكون الرمز هو رمز دائري التحكم التالي.
اذا اضف هذه الى دوراتي،
دعنا نذهب ونلقي نظرة على دوارتنا في هذه اللحظة.
الذهاب إلى دائري،
يمكنك الآن أن ترى أنه في بلدي دائري لدي ثلاثة أزرار مؤشر هنا،
والتي تشير إلى أي شريحة معينة
مرئية حاليا في بلدي دائري والشرائح الشريحة،
ثم المؤشر أيضا يتغير في المقابل
للإشارة إلى أي شريحة معينة مرئية.
يمكنني النقر يدويا على واحد منهم والذهاب إلى شريحة محددة في دائري.
ليس هذا فقط، يمكنك أن ترى أن هناك الآن اثنين من المؤشرات،
اليسار واليمين،
والتي يمكنني استخدامها مرة أخرى التمرير من خلال دائري من خلال
النقر على هذه المؤشرات هنا.
حتى باستخدام هذه الضوابط،
كل من السيطرة السابقة والقادمة والمؤشرات هنا،
يمكنني الانتقال إلى الشريحة المحددة في بلدي دائري.
و هذا يكمل هذا التمرين.
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع دائري الرسالة.