لقد شاركت ثلاثة تأثيرات حول صورة Carousel Bootstrap ، وأعتقد أن هناك دائمًا ما تشعر بالرضا عنه!
التأثير الأول: bootstrap carousel carousel
<! doctype html> <html> <head> <title> pootstrap مثيل- مكونات ملجعة carousel بسيطة </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" REL = "STYLESHER <script src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-carousel metrics-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> data-slide-to = "1"> </li> <li data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-project carousel-> <div> <img src = "/wp-content/uploads/2014/07/slide1.png src = "/wp-content/uploads/2014/07/slide2.png"> </viv> <div> <img src = "/wp-content/uploads/2014/07/slide3 <a href = "#mycarousel" data-slide = "next"> </a> </viv> </body> </html>
النوع الثاني: Carousel مع العنوان (دليل)
<! doctype html> <html> <head> <title> مثيل bootstrap - عنوان المكون الإضافي carousel </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesheet <script src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-carousel metrics-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> data-slide-to = "1"> </li> <li data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-project carousel-> <div> <img src = "/wp-content/uploads/2014/07/slide1.png src = "/wp-content/uploads/2014/07/slide2.png"> <viv> العنوان 2 </viv> </viv> <viv> <fiv> <img src = "/wp-content/uploads/2014/07/slide3 href = "#mycarousel" data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next"> </a> </viv> </body> </html>
النوع الثالث: JS Control Automatic Carousel
<! doctype html> <html> <head> <title> bootstrapjs control carousel </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesheet"> <sript src = "/jquery/2.0.0.0.0 src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-مؤشر carousel-> <ol> <li data-target = "#mycarousel" data-slide-to = "0" data-slide-to = "1"> </li> <li data-target = "#mycarousel" data-slide-to = "2"> </li> </ol> <!-project carousel-> <div> <img src = "/wp-content/uploads/2014/07/slide1.png src = "/wp-content/uploads/2014/07/slide2.png"> </viv> <div> <img src = "/wp-content/uploads/2014/07/slide3 <a href = "#mycarousel" data-slide = "next"> j </a> <!-زر التحكم-> <div style = "text-align: center ؛ 1 "> <input type =" button "value =" slide 2 "> <input type =" button "value =" slide 3 "> </viv> </viv> <script> $ (function () {// initial carousel $ (". carousel $ (". توقف مؤقت"). $ (. $ (#mycarousel "). carousel (1) ؛ }) ؛ </script> </body> </html>يمكن تعيين معلمات محددة في طريقة carousel () ، مثل:
عند استخدامه ، يمكنك تمرير المعلمات ذات الصلة للحالة عند تهيئة المكون الإضافي ، مثل:
$ ("#slidershow"). carousel ({الفاصل: 3000}) ؛يوفر المكون الإضافي Carousel في إطار Bootstrap للمستخدمين أيضًا عدة طرق استدعاء خاصة ، على النحو التالي:
.Carousel ("Cycle"): العب من اليسار إلى اليمين ؛
.Carousel ("توقف مؤقت"): توقف عن تشغيل حلقة ؛
.carousel ("رقم"): حلقات إلى الإطار المحدد ، يبدأ المنشأة من 0 ، على غرار صفيف ؛
.Carousel ("Prev"): العودة إلى الإطار السابق ؛
.Carousel ("التالي"): الإطار التالي
استخدم سمة البيانات للتحكم في الكاروسيل:
<! doctype html> <html> <head> <title> مثيل bootstrap - طريقة المكونات الإضافية carousel </title> <link href = "http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.cs src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://libs.baidu.com/bootsstrap/3.3/js/bootstrap.min.js data-wrap = "true" data-interval = "1000"> <!-مؤشر carousel-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li-target = "#mycarousel" data-to = "1" data-slide-to = "2"> </li> </ol> <!-مشروع carousel-> <viv> <viv> <img src = "/wp-content/uploads/2014/07/slide1.png"> </viv> <div> src = "/wp-content/uploads/2014/07/slide3 style = "text-align: center ؛"> <input type = "button" value = "start"> <input type = "button" value = "pause"> <input type = "button" value = "prevent slide"> <induction type = "button" value = </viv> </viv> </body> </html>
يتم تنفيذ الطريقة التعريفية عن طريق تحديد سمة البيانات ، والتي يمكنها بسهولة التحكم في موضع الكاروسيل. ويشمل بشكل أساسي الأنواع التالية:
1. خاصية ركوب البيانات: خذ قيمة carousel وحددها على carousel.
2. خاصية استهداف البيانات: خذ اسم المعرف أو معرف النمط الآخر المحدد بواسطة القيمة carousel. كما هو موضح في المثال السابق ، خذ القيمة كـ "#Slidershow" وحددها على كل Li من عداد الكاروسيل.
3. سمة انقطاع البيانات: تشمل القيم Prev ، Next ، Prev تعني التمرير للخلف ، والتعويل التالية تعني التمرير للأمام. يتم تعريف قيمة الخاصية هذه أيضًا على رابط وحدة تحكم Carousel ، ويتم تعيين قيمة HREF وحدة التحكم على اسم المعرف أو معرف نمط آخر للحاوية 4.
5. السمة المنزلق إلى البيانات: تستخدم لتمرير مجموعة إطار معين ، مثل انقطاع البيانات إلى "2" ، والتي يمكن إعادة توجيهها مباشرة إلى هذا الإطار المحدد (يبدأ المنشأة من 0) ، ويتم تعريفه أيضًا على كل LI من عداد الكاروسيل.
يجب أن تلاحظ أنه يمكنك إضافة نمط الشريحة إلى طبقة #Slidershow ، واستخدام تأثير تبديل الصورة والصورة لتكون سلسة.
<div id = "slidershow" Data Ride = "Carousel"> ... </div>
بالإضافة إلى Data Ride = "Carousel" ، و Data-Slide ، و Data-Slide-to ، يدعم مكون Carousel أيضًا ثلاث خصائص مخصصة أخرى:
ينفذ الرمز التالي "لا يحلق Carousel بشكل مستمر" و "الفاصل الزمني للركض هو ثانية واحدة".
<div id = "slidershow" data ride = "carousel" data-wrap = "false" data-interval = "1000"> .... </div>
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام جدول التمهيد
تعليمي استخدام المكونات الإضافية Bootstrap
مشاركة موضوع رائع: صورة jQuery carousel JavaScript Picture carousel bootstrap picture carousel
ما سبق هو مقدمة مفصلة إلى JavaScript Picture Carousel. آمل أن يكون هذا المقال مفيدًا للجميع في تعلم برمجة JavaScript.