مع ظهور CSS3 ، أصبح من الممكن إنشاء رسوم متحركة دون استخدام مكتبات JS ، مثل jQuery ، على سبيل المثال. تسمح لك خاصية انتقال CSS3 بتغيير الخصائص الأخرى لعنصر بسلاسة (العرض ، الارتفاع ، الهامش ، العتامة ، إلخ) ، وتحديد وقت وقانون التحول كمعلمات. أنا أقدم كاروسيل صغير ، ولكن وظيفي للغاية في Javascript النقي. صغير مثل نملة ، وهي أصغر بكثير من
بومة . ولكن مع نفس القدرات تقريبا.
يسمح لك Ant-carousel بـ:
- إظهار عنصر واحد أو أكثر ؛
- يمكن أن تظهر العناصر في شكل شريط محدود أو غير محدود (في حلقة) ؛
- عناصر التمرير التلقائي ؛
- يتم التنقل بواسطة الأسهم أو نقاط المؤشر أو الدوران (للشاشات اللمسية) ؛
- يضبط تلقائيا إلى أي عرض الشاشة.
نضع دائري لدينا في ملف index.html (انظر المثال ملف أدناه):
HTML<div class="ant-carousel"> <div class="ant-carousel-hider"> <ul class="ant-carousel-list"> <li class="ant-carousel-element"><img src="images/img1.jpg" alt="1"> <p> 1</p> </li> <li class="ant-carousel-element"><img src=" images /img2.jpg" alt="2"> <p>2</p> </li> … <li class="ant-carousel-element"><img src=" images /imgN.jpg" alt="N"> <p> N</p> </li> </ul> </div> <div class="ant-carousel-arrow-left"></div><div class="ant-carousel-arrow-right"></div> <div class="ant-carousel-dots"></div> </div>
يتم استخدام العناصر <ul> <li> هنا ، ولكن <div> <div> يمكن استخدامها بدلاً من ذلك ، إذا كنت تفضل ذلك. يتم وضع الأسهم ومؤشرات المؤشر بشكل مطلق في الحاويات المعنية. بالنسبة إلى الأسهم ، يتم استخدام أنماط على شكل أقواس ثلاثية ، والتي ، إذا رغبت في ذلك ، يمكنك استبدالها بنماذج أو بتكوين صورة باستخدام العناصر الزائفة
: قبل و
: بعد .
إنشاء دائري مع ثلاثة عناصر مرئية وعرض عنصر 270 بكسل. ثم الحد الأقصى لعرض دائري هو 810 بكسل. نحن ندرج ملف CSS:
CSS .ant-carousel { max-width: 810px; position: relative; } .ant-carousel-hider { overflow: hidden; } .ant-carousel-list { width: auto; margin: 0; padding: 0; list-style-type: none; display: flex; justify-content: flex-start; } .ant-carousel-element { display: block; flex: 0 0 auto; width: 270px; text-align: center; } div.ant-carousel-arrow-left, div.ant-carousel-arrow-right { width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 2; display: block; } div.ant-carousel-arrow-left { left: -40px; top: 40%; background: url(“ant-arrow-left.png”) no-repeat; } div.ant-carousel-arrow-right { right: -40px; top: 40%; background: url(“ant-arrow-right.png”) no-repeat; } div.ant-carousel-arrow-left: hover { opacity: 1.0; } div.ant-carousel-arrow-right: hover { opacity: 1.0; } div.ant-carousel-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: -30px; z-index: 2; text-align: center; } span.ant-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; }
نضع العناصر في حاوية
قائمة ant-carousel ، وقم بتعيين
الشاشة: خاصية
فليكس خاصة بها ، واضغط على جميع العناصر إلى الحافة اليسرى من
المحتوى التبويري: flex-start . الخاصية
flex: 0 0 auto تحدد
flex-shrink إلى 0 (الافتراضي هو 1). يتم تنفيذ التمرير للعناصر الدائرية باستخدام خاصية
العبور عن طريق تغيير المسافة البادئة
لهامش اليسار بسلاسة من الصفر إلى عرض العنصر (في اتجاه واحد) أو من عرض العنصر إلى الصفر (في الاتجاه الآخر). لوظيفة التحويل (التمرير) ،
يتم استخدام قيمة
السهولة .
نمر إلى البرنامج. في خيارات البرنامج يمكنك تكوين:
- عدد العناصر المرئية ؛
- عرض العناصر في شكل شريط من أول إلى آخر أو في حلقة لا نهائية (إغلاق الشريط في حلقة) ؛
- التمرير التلقائي أو اليدوي للعناصر ؛
- التمرير التلقائي الفاصل ؛
- سرعة الحركة
- تمكين / تعطيل عناصر التنقل: الأسهم ، نقاط المؤشر ، التقليب باللمس (للشاشات اللمسية).
تبدأ تهيئة البرنامج بحقيقة أنه يتم تحديد عدد عناصر دائري ، ويتم تعيين القيم الأولية للمتغيرات الداخلية ، يتم تعيين معالجات الأحداث إلى الأسهم والنقاط (إذا كان متصلا). إذا تم تمكين خيار التمرير التلقائي ، يتم تعيين معالجات إضافية تتوقف عن التمرير عند تحريك الماوس فوق عناصر الكوسيل. يتم تشغيل التمرير باللمس إذا كان هناك أكثر من 20 بكسل بين النقطة التي يلمس فيها الإصبع الشاشة ونقطة الإصبع ممزقة من الشاشة وكان إجمالي الوقت الذي يلمس فيه الإصبع الشاشة أقل من 80 مللي ثانية. لا يتمتع المؤلف بعد بخبرة كبيرة مع هذا الكاروسيل ، وبالتالي قد تحتاج القيم المعطاة إلى توضيح. لتشغيل أكثر موثوقية لمعالج التمرير ، قد يتم تقليل المسافة بين النقاط إلى 10 أو 15 بكسل ، ويجب زيادة وقت اللمس إلى 100 أو 120 مللي ثانية. يمكن للمستخدم من هذا دائري تصحيح هذه القيم بنفسه بعد اكتساب بعض الخبرة في استخدامه.
تختلف خوارزمية التمرير للعناصر اعتمادًا على ما إذا كان خيار loop ممكن أم لا. عند التمكين ، عند التمرير إلى اليمين (دالة
elemPrev ) ،
تنخفض خاصية
الهامش الأيسر للسطر بالكامل لعناصر
this.crslL من صفر إلى قيمة سالبة تساوي عرض عنصر
elemWidth . في الوقت نفسه ، يتم استنساخ العنصر الأخير على اليمين وإدراجه قبل العنصر الأول ، وبعد ذلك يتم حذف العنصر الأخير. يتم تعيين السطر
"انتقال: الهامش" + line.speed + "ms eas" ، حيث تكون
options.speed هي سرعة الحركة ،
والراحة هي وظيفة الرسوم المتحركة. الآن يمكنك التمرير. تتغير خاصية
الهامش إلى اليسار بسلاسة من قيمة سالبة إلى صفر ، وينتقل المسطرة بالكامل بسلاسة إلى اليمين ، ويأتي العنصر الأخير أولاً. بعد
options.speed microseconds ، يتم إعطاء السطر القيمة السابقة
"الانتقال: بلا" .
var elm, buf, this$ = this; elm = this.crslList.lastElementChild; buf = elm.cloneNode(true); this.crslList.insertBefore(buf, this.crslList.firstElementChild); this.crslList.removeChild(elm); this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; window.getComputedStyle(this.crslList). marginLeft; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '0px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;' }, this.options.speed);
إذا كنت بحاجة إلى التمرير عناصر n في نفس الوقت ، يتم تنفيذ التقليب العناصر في حلقة n مرات ، ويزيد المسافة
الهامش يسار n مرة.
يحدث التمرير إلى اليسار (دالة
elemNext ) بالترتيب العكسي. أولاً ، يتم تعيين الخاصية
"انتقال: الهامش" + options.speed + "ms ms" إلى السطر
this.crslList ويتم تمرير المسطرة بسلاسة إلى اليسار (
crslList.style.marginLeft = '-' + elemWidth + 'px' ). علاوة على ذلك ، بعد
options.speed microseconds ، يتم استنساخ العنصر الأول وإدراجه في نهاية المسطرة ، وبعد ذلك يتم حذف العنصر الأول. إرجاع المسطرة القيمة 'انتقال: بلا'. إذا كنت بحاجة إلى التمرير لعناصر n في نفس الوقت ، فإن إعادة ترتيب العناصر ، كما في الحالة السابقة ، يتم تنفيذها n مرات في حلقة ويزيد مسافة
الهامش إلى اليسار n مرة.
var elm, buf, this$ = this; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;'; elm = this$.crslList.firstElementChild; buf = elm.cloneNode(true); this$.crslList.appendChild(buf); this$.crslList.removeChild(elm) this$.crslList.style.marginLeft = '0px' }, this.options.speed);
إذا تم تعطيل خيار دورة ، في هذه الحالة لا توجد تباينات للعناصر ، ويتم إزاحة السطر الكامل من العناصر ككل إلى اليسار أو اليمين إلى نقاطه القصوى. يتم تعيين السطر الخاص بالعناصر
this.crslList ' transfer : margin' + options.speed + 'ms ms' حتى عند تهيئة الخط الدائري ولم يعد يتم حذفه.
يسمى دائري باسم فئة النمل دائري أو بواسطة معرف. في الحالة الثانية ، يمكنك وضع عدة دائري على صفحة واحدة. قد يبدو ملف index.html دائري كما يلي:
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Ant-Carousel</title> <link rel="stylesheet" type="text/css" href="ant-files/ant-carousel-styles.css"> </head> <body> … <div class="ant-carousel"> … </div> … <footer> … </footer> <script src="ant-files/ant-carousel. js"></script> <script>new Ant()</script> </body> </html>
لوضع عدة دوارات على صفحة واحدة ، تحتاج إلى الاتصال بهم بواسطة ID. قد يكون دائري مختلفة عدد مختلف من العناصر.
<div class="ant-carousel" id=”first”> … <div class="ant-carousel" id=”second”> … <script>new Ant("first"); new Ant("second");</script>
جميع الصور مأخوذة من مصادر مفتوحة.شكرا لاهتمامكم!