دعونا نلقي نظرة على تأثير carousel صورة bootstrap:
ما سبق هو التأثير الذي يشاركه الجميع ، ولكن هذه هي الصفحة الرئيسية لموسيقى Netease Cloud.
تذكر أن تظهر أولاً في مكتبة التحكم الرسمية لـ IOS7 ، وأضاف Android أيضًا هذا العرض إلى إصدار معين. التصميم عالمي .. يدعم bootstrap3 أيضًا استخدام هذه التأثيرات في الويب.
بعد ذلك ، تحليل بسيط:
1. التحليل الهيكلي
تشمل صورة الكاروسيل بشكل رئيسي ثلاثة أجزاء:
☑ صور كاروسيل
☑ عداد لصور carousel
☑ وحدة التحكم في صور carousel
الخطوة 1: تصميم الحاوية لصور الكاروسيل. تم اعتماد نمط الكاروسيل في إطار bootstrap ، ويتم تعريف قيمة المعرف لهذه الحاوية ، بحيث يتم استخدام سمة البيانات لإعلان الزناد لاحقًا.
انسخ الرمز على النحو التالي: <div id = "slidershow"> </div>
الخطوة 2: تصميم عداد صورة دائري. أضف آلة حاسبة صورة دائرية داخل الحاوية div.carousel ، باستخدام نمط المؤشرات carousel. تتمثل وظيفتها الرئيسية في عرض ترتيب التشغيل للصورة الحالية (هناك العديد من الصور ، وما يلي هي نفس القوائم تستخدم بشكل عام لجعلها:
<div id = "slidershow"> <!-قم بتعيين ترتيب carousels-> <ol> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ol> </liv>
الخطوة 3: تصميم منطقة تشغيل صورة كاروسيل. في التأثير الكامل لصورة carousel ، تعد منطقة التشغيل هي المنطقة الأكثر أهمية ، والتي تستخدم بشكل أساسي لوضع الصور التي تحتاج إلى تمييز. يتم التحكم في هذه المنطقة باستخدام نمط Carousel Inn ، ويتم وضعها أيضًا في حاوية carousel ، ويتم وضع كل صورة من الكاروسيل من خلال حاوية العنصر:
<div id = "slidershow"> <!-قم بتعيين ترتيب carousels-> <ol> <li> 1 </li> ... </ol> <!-اضبط صور carousel-> <viv> <a href = "##"> <img src = "http://images3 </viv> <viv> <a href = "##"> <img src = "http://images3 src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div> ... <viv> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"> </a> </viv> </viv> </viv>
الخطوة 4: تعيين وصف صورة carousel. العديد من تأثيرات صورة الكاروسيل لها عنوانها الخاص ومحتوى الوصف على كل صورة. في الواقع ، يوفر Carousel في إطار Bootstrap أيضًا تأثيرات مماثلة. فقط أضف الكود المقابل في أسفل الصورة في العنصر.
<div id = "slidershow"> <!-قم بتعيين ترتيب carousels-> <ol> <li> 1 </li> ... </ol> <!-تعيين صور carousel-> <viv> <a href = "##"> <img src = "http://images3 <!-الصورة المقابلة محتوى العنوان والوصف-> <div> <h3> عنوان الصورة </h3> <p> محتوى الوصف ... </p> </viv> </viv> ... </div> </viv>
الخطوة 5: تصميم وحدة تحكم صورة carousel. في كثير من الأحيان ، تحتوي صور Carousel أيضًا على وحدة تحكم تلعب إلى الأمام والخلف. في Carousel ، يتم تحقيقه من خلال الجمع بين اليسار واليمين مع نمط السيطرة carousel. حيث اليسار يعني التشغيل إلى الأمام ، اليمين يعني التشغيل للخلف. يتم وضعه أيضًا في حاوية الكاروسيل:
<div id = "slidershow"> <!-قم بتعيين ترتيب carousels-> <ol> ... </ol> <!-اضبط صور carousel-> <div> ... </div> <!-اضبط وحدة التحكم في صورة carousel-> <a href = ""
2. عملية التنفيذ
<div id = "carousel-example-generic" dative = "carousel"> <!-مؤشرات-> <ol> <li t-arget = "#carousel-example-generic" data-slide-to- "0"> </li> <li data-target = "#carousel-example-generic-generic" data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <!-Wrapper for Slides-> <div reb = "listbox"> <viv> <img src = "..." <!-عناصر التحكم-> <a href = "#carousel-example-generic" rob = "button" data-slide = "prev"> <span> </span> <span> سابق </span> </a>
مقسمة إلى ثلاثة أجزاء
1. مؤشر
جزء واحد هو النقطة الصغيرة أدناه ... هو المؤشر
يتم استخدام فئة OL لإنشاء هذا المؤشر
يتم استخدام كل سمة انقطاع البيانات إلى = "0" لتوجيه الموقع لتحديد حالة التنشيط الافتراضية.
غرض
<viv> <img src = "..."> <viv> <h3> ... </h3> <p> ... </p> </viv> </viv>
لا يوجد تشويق ، فقط املأ عنوان ومحتوى الصورة
2. وحدات تحكم اليسار واليسرى
الرمز كما يلي
<a href = "#mycarousel" rob = "button" data-slide = "prev"> <span aria-hidden = "true"> </span> <span> prevent </a span> </a> <a href = "#mycarousel" rob = "button" slide = next "> <span-hidden =
العملية في جافا سكريبت
التهيئة
$ ('. carousel'). carousel ({الفاصل: 2000})قم بتنفيذ حلقة
. كاروسيل ('Cycle')
يوقف
.Carousel ("مؤقت")
تحديد موقع عنصر معين يبدأ من 0
. كاروسيل (رقم)
السابق
. كاروسيل ("السابق")
التالي
.Carousel ('التالي')
يمكن أيضًا العثور على المزيد من المحتوى حول bootstrap في مواضيع خاصة: "Bootstrap التعلم التعليمي"
ما سبق هو مقدمة مفصلة إلى JavaScript Picture Carousel. آمل أن يكون هذا المقال مفيدًا للجميع في تعلم برمجة JavaScript.