يوفر هذا المثال تحليلًا شاملاً لاستخدام carousel في bootstrap للرجوع إليه. المحتوى المحدد كما يلي
ملف رمز المصدر:
carousel.SCSS
carousel.js
مبدأ التنفيذ:
إخفاء جميع العناصر المراد عرضها ، ثم حدد أن الكتلة الحالية المراد عرضها وعرضها وارتفاع قابلة للتكيف
تحليل رمز المصدر:
1. هيكل HTML: مقسمة بشكل رئيسي إلى أربعة أجزاء
1.1. الحاوية: يتطلب Div الخارجي ، قوس بيانات = "carousel" تحديد مكون إضافي لتشغيل العجلات ، ويوفر معرفًا لتسهيل ارتباط مؤشر الدائرة.
1.2. يتم لف جزء قائمة الصور مع Div الخارجي ، ثم سيتم لف كل IMG مع div ، والفئة ملفوفة بواسطة العنصر.
1.3. مؤشر الدائرة: استخدم قائمة OL لعرض عناصر قائمة الرسوم الخاصة بها. يحتاج كل عنصر قائمة إلى تحديد سمة انقطاع البيانات إلى = "الفهرس" ، والتي يتم استخدامها لتمييز رقم الفهرس للدائرة الحالية.
1.4. أزرار التحكم اليسرى واليسرى: أدرك وظيفة التحرك إلى اليسار واليمين
2. نمط CSS
2.1. كاروسيل: لا يوجد سوى علامة تحديد موقع نسبية واحدة
2.2. Carousel Inner: قم بتدوير منطقة قائمة الصور ، حيث يحتوي كل عنصر على عنصر لتعديله
2.2.1. نشط ، التالي ، و PRED يعتبر مرئيا.
2.2.2. Carousel-Caption: هذا يعني أن كل عنصر يجب أن يكون له معلومات عن العنوان ، ويتم عرض الموضع الافتراضي.
2.3. Carousel-Control: يحدد نمط الأزرار اليمنى واليسرى ، والتي ستضع معلومات مثل التدرج والشفافية. يوفر أنمتين إضافيتين: أيقونة PREV و ICON-NEXT.
2.4. المؤشرات carousel: نمط جزء الدائرة في وضع تماما. يتم تعيين كل LI كعنصر كتلة مضمونة. استخدم استقلاب النص: -999 لإخفاء الخط.
3. كود JS
3.1. الطريقة الأساسية الرئيسية هي الشريحة ، التي تدرك تبديل الصور
3.1.1. عند تنفيذ مفتاح الصورة لأول مرة ، سيتم استدعاء طريقة الإيقاف المؤقت لتعيين مؤقت مؤقتًا. فقط بعد اكتمال مفتاح الصورة ، سيتم استدعاء طريقة الدورة لتمكين المؤقت.
3.1.2. قبلت معلمتين: اكتب وبعد التالي
3.1.2.1. النوع: يعني تغيير الصفحات لأعلى أو لأسفل
3.1.2.2. التالي: هذه المرة يتم عرضه كعنصر النشط. إذا لم يتم تمريرها ، فأنت بحاجة إلى استخدام طريقة GetItemfordirection للحصول عليها.
3.1.3. احصل على المعلمات الأساسية مثل $ Active (العنصر النشط حاليًا) ، و $ التالي (العنصر الذي يجب أن يكون عنصرًا نشطًا) ، و iscycling (مقبض مؤقت للقرار المؤقت) ، والاتجاه (الاتجاه) وغيرها من المعلمات الأساسية
3.1.4 ، ثم توجيه حدث slide.bs.carousel
3.1.5. ثم قم بتعيين عنصر الفهرس للمؤشرات
3.1.6. تبديل الصور. إذا كنت تدعم الرسوم المتحركة CSS ، فاستخدم الرسوم المتحركة للتبديل. خلاف ذلك ، أضف CSS مباشرة للتبديل.
3.1.7. مبدأ تبديل الرسوم المتحركة:
3.1.7.1. السابق: إنه نمط سيتم دمجه عن طريق تمرير الصورة إلى اليمين: النشط اليمين (العنصر النشط) السابق (العنصر التالي). في هذا الوقت ، السابق نفسه هو -100 ٪ ، ضع الصورة على أقصى اليسار
3.1.7.2. التالي: قم بتمرير الصورة إلى اليسار ، ثم اليسار التالي (العنصر التالي). في هذا الوقت ، التالي هو 100 ٪ ، ضع الصورة على أقصى اليمين.
3.1.7.3. نشط يمين: يجب أن تكون الصورة إلى اليمين ، لذلك يجب أن تحرك 100 ٪ من عرض الصورة.
3.1.7.4. اليسار النشط: الصورة على اليسار ، ثم يجب تشغيل عرض الصورة -100 ٪
3.1.7.5. الصورة المقارنة:
3.1.8. رمز التنفيذ (باستثناء CSS3):
.carousel-inner> .active ، .carousel-inner> .next ، .carousel-inner> .prev {display: block ؛}. أعلى: 0 ؛ العرض: 100 ٪ ؛}. .active.right {يسار: 100 ٪ ؛}إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
مشاركة موضوع رائع: صورة jQuery carousel JavaScript Picture carousel bootstrap picture carousel
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.