يمكن رؤية تأثير صورة الكاروسيل في الويب ، ويسميها الكثير من الناس أيضًا عرض الشرائح. التأثير الرئيسي للعرض هو تشغيل صور متعددة في دورة ، والعب من اليمين إلى اليسار. يلعبه سيتوقف عندما يحوم الماوس فوق الصورة. إذا كان الماوس يحوم أو ينقر على النقطة في الزاوية اليمنى السفلى ، فسيتم عرض الصورة المقابلة.
يتم تطبيق تأثير كاروسيل الصورة هذا في إطار bootstrap من خلال المكون الإضافي carousel
لقطة شاشة للتأثير التجريبي:
شفرة:
<! doctype html> <html> <head> <meta charset = "utf-8"> <!-<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/cs/bootstrap.min.css">- href = "css/bootstrap.min.css"/> <style> body {padding: 10px ؛ الهامش: 10px ؛} </style> </head> <body> <div id = "mycarousel"> <!-الخطوة 1: تصميم حاويات للصور carousel. -> <!-#slidershow طبقة تضيف نمط الشريحة ، واستخدم الصور والصور لجعلها على نحو سلس-> <ol> <!-الخطوة 2: تصميم عداد صورة carousel. -> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1"> </li> <li-t-arget = design the carouse area "#mycarousel" data-slide-to = "2" نمط carousel-inner للتحكم-> <viv> <img src = "http://images3 src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> العنوان 2/h4> <p> صورة 2 </p> </fiv> <iv> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> العنوان 2/h4> <p> صورة 2 </p> </fiv> <iv> <img src = "http://images3.c-ctrip.com/rk/201403/yfdd580145a.png"> <fiv> <h4> العنوان الثالث </h4> <p> مقدمة في محتوى الصورة ثلاث </p> </p div> </div> <! قم بتشغيل السيطرة على الكاروسيل اليسرى إلى الأمام ووحدة التحكم التي تلعب للخلف-> <a href = "#mycarousel" data-slide = "prev"> ‹<!-<a href = "#slidershow" rob = "button" data-slide = "prev">-> </span> </af> <a href = data-slide = "next"> <span> </span> <!-<a href = "#carousel-example-generic" data-slide = "prev"> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> <span> </span> </a>-> </viv> <script> $ ('. src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>-> <!-<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html> /*BootSstrap.css file 5835 إلى Line 5863*/. /*تحديد المواقع المطلقة لمنطقة العد بأكملها*/أسفل: 10px ؛ /*10px من أسفل الحاوية carousel*/z-index: 15 ؛ /*قم بتعيين مستواه على محور z*//*مركز العد بأكمله على المستوى*/اليسار: 50 ٪ ؛ العرض: 60 ٪ ؛ حشوة اليسار: 0 ؛ الهامش-اليسار: -30 ٪ ؛ النصوص النصية: المركز ؛ القائمة: لا شيء ؛}. -9999px ؛ المؤشر: مؤشر ؛ خلفية اللون: #000/9 ؛ الخلفية اللون: rgba (0 ، 0 ، 0 ، 0) ؛ الحدود: 1px صلبة #fff ؛ الحدود الحدودية: 10px ؛}/*اضبط نمط الحالة الحالية*/. carousel-indicators.صورة carousel-لعب Carousel اللمس التعريفي
هناك طريقتان لإثارة مخطط الكاروسيل ، أحدهما التصريح ، والآخر هو جافا سكريبت. أولاً ، دعونا نلقي نظرة على الطريقة التعريفية.
يتم تنفيذ الطريقة التعريفية عن طريق تحديد سمة البيانات ، والتي يمكنها بسهولة التحكم في موضع الكاروسيل. ويشمل بشكل أساسي الأنواع التالية:
• خاصية ركوب البيانات: خذ قيمة carousel وحددها على carousel.
• خاصية استهداف البيانات: خذ اسم المعرف أو معرف النمط الآخر المحدد بواسطة القيمة carousel. كما هو موضح في المثال السابق ، خذ القيمة "#Slidershow" وحددها على كل LI من عداد الكاروسيل.
• سمة انقطاع البيانات: تشمل القيم Prev و Next و Prev تعني التمرير للخلف ، والتعويل التالية تعني التمرير للأمام. يتم تعريف قيمة الخاصية هذه أيضًا على رابط وحدة تحكم Carousel ، ويتم تعيين قيمة HREF وحدة التحكم على اسم المعرف أو معرف النمط الآخر من carousel الحاوية.
• سمة انقطاع البيانات إلى السمة: تستخدم لتمرير ترجمة إطار معين ، مثل انقطاع البيانات إلى "2" ، والذي يمكن إعادة توجيهه مباشرة إلى هذا الإطار المحدد (يبدأ الترتيب من 0) ، ويتم تعريفه أيضًا على كل LI من عداد الكاروسيل.
بالإضافة إلى Data Ride = "Carousel" ، و Data-Slide ، و Data-Slide-to ، يدعم مكون Carousel أيضًا ثلاث خصائص مخصصة أخرى:
| اسم السمة | يكتب | القيمة الافتراضية | يصف |
| بيانات البيانات | رقم | 5000 | وقت الانتظار (ميلي ثانية) لتناوب الشريحة. إذا كان خطأ ، فلن يبدأ الكاروسيل الحلقة تلقائيًا |
| وصول البيانات | خيط | تحوم | يتم تعليق الماوس الافتراضي في منطقة الشريحة وسيبدأ التشغيل عند المغادرة. |
| بيانات البيانات | قيمة منطقية | حقيقي | هل حلقة الكاروسيل المستمرة |
ينفذ الرمز التالي "لا يحلق Carousel بشكل مستمر" و "الفاصل الزمني للركض هو ثانية واحدة".
<div id = "slidershow" data ride = "carousel" data-wrap = "false" data-interval = "1000">.
يمكن تعريف السمات الثلاث المذكورة أعلاه على عناصر الحاويات أو على معرفات (أو روابط التحكم اليسارية واليمنى) ، ولكن التعريف الأخير له أولوية أعلى.
صورة Carousel-طريقة مشغل JavaScript
تم إزالة البيانات الثلاثة Data = "Carousel" و Data-Slide = "Prev" و Data-Slide = "Next". دعنا نستخدم رمز JS لتنفيذ وظائف "Carousel الأوتوماتيكية" و "الأزرار الأمامية والخلفية".
استخدم JS لتنفيذ وظائف "الأزرار التلقائية للصور" و "الأزرار الأمامية والخلف"
بشكل افتراضي ، إذا تم تعريف سمة Data Ride = "carousel" على حاوية carousel ، فسيتم تحميل تأثير تبديل صورة carousel تلقائيًا بعد تحميل الصفحة. إذا لم يتم تعريف سمة ركوب البيانات ، فيمكن تشغيل تبديل صورة carousel من خلال طريقة JavaScript. طريقة الاستخدام المحددة هي كما يلي:
نسخة الكود كما يلي:
$ (". carousel"). carousel () ؛
يمكنك أيضًا تحديده بواسطة معرف الحاوية:
نسخة الكود كما يلي:
$ ("#slidershow"). carousel () ؛
يمكن تعيين معلمات محددة في طريقة carousel () ، مثل:
| اسم السمة | يكتب | القيمة الافتراضية | يصف |
| فاصلة | رقم | 5000 | وقت الانتظار (ميلي ثانية) لتناوب الشريحة. إذا كان خطأ ، فلن يبدأ الكاروسيل الحلقة تلقائيًا |
| يوقف | خيط | تحوم | يتم تعليق الماوس الافتراضي في منطقة الشريحة وسيبدأ التشغيل عند المغادرة. |
| طَوّق | قيمة منطقية | حقيقي | هل حلقة الكاروسيل المستمرة |
عند استخدامه ، يمكنك تمرير المعلمات ذات الصلة للحالة عند تهيئة المكون الإضافي ، مثل:
$ ("#slidershow"). carousel ({الفاصل: 3000}) ؛في الواقع ، عندما نقوم بتكوين المعلمات لطريقة carousel () ، يمكن تبديل تأثير carousel تلقائيًا. ومع ذلك ، فإن المكون الإضافي Carousel في إطار Bootstrap يوفر للمستخدمين أيضًا العديد من طرق الاتصال الخاصة ، على النحو التالي:
• .Carousel ("Cycle"): يلعب من اليسار إلى اليمين ؛
• .Carousel ("توقف مؤقت"): توقف عن تشغيل حلقة ؛
.
• .Carousel ("Prev"): العودة إلى الإطار السابق ؛
• .Carousel ("التالي"): الإطار التالي
على سبيل المثال ، طريقة الاتصال السابقة ، لا يمكن أن تعمل أزرار الأمام والخلفية بشكل صحيح. في الواقع ، يمكن استخدامها للعمل بشكل طبيعي من خلال طرق .carousel ("Prev") و .carousel ("Next"). الرمز كما يلي:
$ (function () {$ ("#slidershow"). carousel ({steral: 2000}) ؛ $ ("#slidershow A.Left"). انقر فوق (function () {$ (" A.Right "). انقر فوق (function () {$ (". <! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css 10px ؛} </style> </head> <body> <div id = "carousel-example" data-ride = "carousel"> <!-مؤشرات --> data-target = "#carousel-example" data-slide-to = "1"> </li> <li data-target = "#carousel-example" data-slide-to = "1"> </li> <li t-arget = "#carousel-example" data-slide to = "2"> </li> src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5 src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3 href = "#carousel-example" data-slide = "next"> <span> </span> </a> </viv> <!-<script> $ (function () {$ ('. src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>-> <!-<script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html>يوصي wulin.com بمواضيع ذات صلة بالتمهيد:
مهارات تشغيل مكون Bootstrap
ملخص المعرفة المتعلقة بالتمهيد
ما سبق هو التفسير التفصيلي للاستخدام أمثلة على مخطط دوران التناوب حول الذروة الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!