أبسط شريط تمرير. بسيط مستجيب باللمس jQuery المتزلج

شريط تمرير بسيط وخفيف الوزن (مضغوط 21 كيلو بايت) مكتوب بلغة جافا سكريبت خالصة بدون أي تبعيات ، على سبيل المثال يعمل بدون مسج.

تم اختباره في المتصفحات التالية:

• Chrome 26.0
• فايرفوكس 20.0
• سفاري 5.1.7
• IE10
• أوبرا 16.0

لا يوجد دعم كامل لـ IE8 / 9 (لا توجد تأثيرات).

الخصائص

• يمكنك إضافة عدد غير محدود من أشرطة التمرير إلى الصفحة ، حتى وضع أحدهما داخل الآخر.
• يتم تغيير الحجم بناءً على المحتوى ، ولكن يمكن تعطيله.
• التنقل بلوحة المفاتيح - عندما يكون المؤشر على شريط التمرير ، فمن الممكن التبديل بين أشرطة التمرير بالأسهم.
• دعم أحداث اللمس المحمول.

اتصال

قبل إغلاق العلامةبحاجة للاتصال المنزلقأو المنزلق .min.jsملف.

ترميز HTML

المنزلقيمكن أن تعمل مع أي عناصر كتلة مضمنة ، مضمنة ، لها سمة معرف. يمكنك استخدام أي عناصر فرعية من المستوى الأول مع سمة data-slidr ، على سبيل المثال:

• تفاحة
• موز
• جوزة الهند

جافا سكريبت

بعد الاتصال المنزلقيصبح كائن شريط التمرير العام متاحًا. أسهل طريقة لإنشاء شريط تمرير هي:

Slidr.create ("slidr-id"). start () ؛

الاتصال بجميع الإعدادات:

Slidr.create ("slidr-id" ، (بعد: function (e) (console.log ("in:" + e.in.slidr) ؛) ، قبل: function (e) (console.log ("out: "+ e.out. cube ":" 0.5s easy-in ") ، اللمس: صحيح ، انتقال:" مكعب ")). start () ؛

إعدادات

يتم سرد كافة الإعدادات المتاحة لـ slidr.js في الجدول أدناه.

بعد عمليات الاسترجاعات وقبلها تتلقى البيانات التالية:

(المعرف: "slidr-id" ، في: (el: # ، slidr: "data-slidr-in"، trans: "transfer-in"، dir: "direction-in")، out: (el: # ، slidr: "data-slidr-out"، trans: "transfer-out"، dir: "direction-out"))

Slider.js API العالمية

توفر مساحة الاسم العمومية slidr الوظائف التالية:

/ ** * الإصدار الحالي *return (سلسلة) major.minor.patch. * / functionversion () () ؛ / ** * تأثيرات الانتقال المتوفرة. *return (صفيف) من الانتقالات. * / وظيفة انتقالات () () ؛ / ** * إنشاء وإرجاع ملف Slidr. * سيؤدي استدعاء هذه الوظيفة مرتين على نفس العنصر إلى إرجاع كائن Slidr الذي تم إنشاؤه بالفعل. * معرف عنصرparam (سلسلة) لـ Slidr. *param (Object =) إعدادات opt_settings لشريط التمرير. * / وظيفة إنشاء (معرف ، opt_settings) () ؛

المنزلق API

دخول قصير

Var s = slidr.create ("slidr-api-demo"، (فتات الخبز: صحيح ، تجاوز: صحيح)). أضف ("h"، ["one"، "two"، "three"، "one"]) .add ("v" ، ["خمسة" ، "أربعة" ، "ثلاثة" ، "خمسة"] ، "مكعب") .start () ؛

القائمة الكاملة لوظائف Slidr.js API أدناه.

/ ** * ابدأ شريط التمرير! * البحث عن الشرائح تلقائيًا لإنشائها إذا لم تتم إضافة أي شيء قبل بدء الاستدعاء (). *param (سلسلة) opt_start `data-slidr` id لتبدأ من. *return (هذا) * / بدء الوظيفة (opt_start) () ؛ / ** * تحقق مما إذا كان بإمكاننا الانزلاق. *param (سلسلة نصية) بجانب اتجاه ("up" ، "down" ، "left" ، "right") أو معرف `data-slidr`. *return (منطقية) * / وظيفة canSlide (التالي) () ؛ /** * الانزلاق! *param (سلسلة نصية) بجانب اتجاه ("up" ، "down" ، "left" ، "right") أو معرف `data-slidr`. *return (هذا) * / وظيفة الشريحة (التالي) () ؛ / ** * يضيف مجموعة من الشرائح. *param (سلسلة) اتجاه `أفقي || h` أو `عمودي || ت. *param (Array) ids قائمة بـ "data-slidr` id" لإضافتها إلى Slidr. يجب أن تكون الشرائح فرعية مباشرة من Slidr. *param (string =) opt_transition الانتقال لتطبيقه بين الشرائح أو الاستخدامات الافتراضي. *param (boolean =) opt_overwrite ما إذا كان سيتم الكتابة فوق تعيينات / انتقالات الشرائح الحالية في حالة حدوث تعارضات. *return (this) * / function add (direction، ids، opt_transition، opt_overwrite) ()؛ / ** * تلقائيًا تقدم إلى الشريحة التالية بعد مهلة معينة. تبدأ المكالمات () إذا لم يتم استدعاؤها بالفعل. *param (int =) opt_msec عدد الملي ثانية بين كل انتقال للشريحة. الافتراضات إلى 5000 (5 ثوان). *param (سلسلة = ) opt_direction "up" أو "down" أو "left" أو "right". يتم تعيينه على "right". *param (سلسلة =) opt_start معرف `data-slidr` للبدء عند (يعمل فقط إذا تم استدعاء تلقائي لبدء Slidr). *return (this) * / function auto (opt_msec، opt_direction، opt_start) ()؛ / ** * إيقاف النقل التلقائي إذا كان قيد التشغيل. *return (هذا) * / وظيفة توقف () () ؛ / ** * ضبط توقيتات الرسوم المتحركة المخصصة. *param (سلسلة | كائن) انتقال إما اسم انتقال (أي "مكعب") ، أو كائن ("انتقال": "توقيت"). *param (string =) opt_timing توقيت الرسوم المتحركة الجديد (أي "0.5 ثانية من الراحة"). غير مطلوب إذا كان الانتقال كائنًا. *return (هذا) * / توقيت الوظيفة (انتقال ، opt_timing) () ؛ / ** * تبديل فتات الخبز. *return (this) * / function breadcrumbs () () ؛ / ** * تبديل الضوابط. *param (string =) opt_scheme قم بالتبديل بين التشغيل / الإيقاف إذا لم يكن موجودًا ، وإلا فقم بتغيير التنسيق. "الحد" أو "الزاوية" أو "بلا". *return (this) * / وظيفة الضوابط (opt_scheme) () ؛

الصفحات التي تم تمريرها أثناء انتقال الشريحة

يظهر هذا الخطأ المزعج في بعض المتصفحات. لإصلاحها ، تحتاج إلى إضافة نمط إلى الجسم:

الجسم (تجاوز: مخفي ؛)

تغيير الحجم الديناميكي

Slidr نفسه "يفهم" ما إذا كان من الضروري تغيير حجم شريط التمرير ليلائم الصورة. إذا كانت كتلة شريط التمرير ذات أبعاد ، فلن يقوم Slidr بتغييرها تلقائيًا. إذا تم تحديد خصائص min-width و min-height ، فسيقوم شريط التمرير بتغيير حجمه وفقًا للمحتوى ، مع مراعاة هذه القيم. خلاف ذلك ، سيتم إجراء التحجيم تلقائيًا.

تغيير الحجم تلقائيًا

أبعاد ثابتة

ضوابط المنزلق

تخطيط عناصر التحكم كما يلي:

يمكنك تخصيص أي عنصر تحكم في شريط التمرير باستخدام محددات CSS:

جانبًا .slidr-control.right (العرض: 50 بكسل! مهم ؛ الارتفاع: 50 بكسل! مهم ؛ أعلى: 50٪! هام ؛ أعلى الهامش: -25 بكسل! مهم ؛ اليمين: -25 بكسل! مهم ؛ نصف قطر الحد: 25 بكسل ؛ الخلفية : url ("/ static / images / arrow_right.png") 14px 13px أسود بدون تكرار ؛ عتامة: 0.4 ؛) جانبًا .slidr-control.right: hover (عتامة: 1 ؛)

يتم تنفيذ التحكم في السهم باستخدام: after pseudo-selector ، لذلك لإخفائه استخدم الكود التالي:

// إخفاء سهم واحد داخل وحدة تحكم واحدة. جانبا. slidr-control.right: بعد (لون الحدود: شفاف! مهم ؛) // إخفاء كل الأسهم داخل وحدة تحكم واحدة. جانبا .slidr-control: after (border-color: transparent! important؛) // إخفاء جميع أسهم Slidr. جانبا .slidr-control: after (لون الحدود: شفاف! مهم ؛)

فتات الخبز Slidr

فتات الخبز لها ترميز HTML بسيط. يرمز كل ul إلى السطر بأكمله ، وكل لي يرمز إلى مسار التنقل:

تصميم فتات الخبز باستخدام CSS:

// تخصيص الموضع والحجم ولون الحدود ولون الخلفية. جانبا (يمين: 50٪! مهم ؛ هامش-يمين: -41 بكسل! مهم ؛) جانبا. li.normal (لون الحدود: أبيض! مهم ؛) جانبًا. slidr-breadcrumbs li.active (لون الخلفية: أسود! مهم ؛)

رخصة

هذا البرنامج مجاني للاستخدام بموجب ترخيص MIT.

من المؤلف:على الرغم من الشائعات حول "الموت" المزعوم للجزء المرئي من صفحات الويب دون تمرير ، فإن الحاجة إلى شريط تمرير جيد لم تختف في أي مكان. لنكن صادقين لثانية - المتزلجون ممتعون. بالإضافة إلى ذلك ، لا شيء آخر ، بخلاف نقل المحتوى ، يسبب تأثير "رائع" لدى المستخدم. جميع أشرطة التمرير عبارة عن مجموعة من عدة شرائح تحل محل بعضها البعض ومن المهم للغاية أن يكون رمز شريط التمرير خفيفًا قدر الإمكان. هذا هو المكان الذي يكون فيه jQuery مفيدًا.

ألق نظرة على 20 شريط تمرير jQuery من سوق Envato وسترى أن هناك منزلقات أكثر من مجرد كتلة منزلقة.

1. RoyalSlider - معرض صور بشاشة تعمل باللمس مع jQuery

الآن ، يعني شريط التمرير سريع الاستجابة الذي يكون أيضًا صديقًا للشاشة التي تعمل باللمس أكثر بكثير مما كان عليه في السابق. تجمع RoyalSlider بين كلتا الميزتين: القدرة على التكيف والعمل مع شاشات اللمس. اختيار جيد لأن المعرض مكتوب بلغة HTML5 و CSS3.

بعض الميزات الشيقة:

جافا سكريبت. بداية سريعة

تحسين محركات البحث

قابلية عالية للتخصيص

أكثر من 10 قوالب للمبتدئين

هناك احتياطي لتحولات CSS3

في رأيي ، أروع ميزة هي "بنية البرنامج النصي المعياري" ، والتي تسمح لك بتعطيل الأشياء غير الضرورية من ملف JS الرئيسي ، وبالتالي تقليل الوزن. RoyalSlider ، معرض صور jQuery touchscreen ، عبارة عن شريط تمرير جافا سكريبت قوي يجب أن يكون ضروريًا لمجموعة أدوات أي مطور.

2. المنزلق ثورة مستجيبة البرنامج المساعد jQuery

ليس من السهل القيام بشيء "ثوري" باستخدام شريط التمرير. عندما يتعلق الأمر بالمنزلقات ، فهناك العديد من الميزات التي يمكنك إضافتها إليها. ومع ذلك ، فإن Slider Revolution هي محاولة جيدة حقًا. من بين منزلقات jQuery ، يلبي هذا المثيل جميع متطلباتك الممكنة.

قائمة ميزات شريط التمرير طويلة جدًا ، لذا سأدرج فقط أفضل الميزات:

تأثير المنظر والرسوم المتحركة المخصصة

طبقات وشرائح غير محدودة مع روابط

جاهزة للاستخدام ، أنماط قابلة للتخصيص بعمق

وأكثر بكثير

تجعل القدرة على إضافة صورة ومشغل فيديو مدمج وروابط وسائط اجتماعية من Slider Revolution أحد أكثر الخيارات مرونة وقابلية للتخصيص على الويب.

3. LayerSlider Responsive jQuery slider plugin

العنوان "LayerSlider Responsive jQuery Slider Plugin" لا ينصف هذا المنزلق حقًا.
200+ تحولات الشرائح ثنائية وثلاثية الأبعاد ستدير رأس أي شخص.

زوجان من الميزات البارزة:

13 جلود و 3 أنواع قائمة

القدرة على وضع صورة ثابتة أعلى شريط التمرير

و jQuery الاحتياطي

وأكثر بكثير

كما هو الحال مع شريط التمرير السابق ، يمكن إضافة أي محتوى تقريبًا ، حتى محتوى الوسائط المتعددة المقيم في HTML5. يجلب LayerSlider الحياة إلى المنزلقات وهو أيضًا جميل جدًا.

4. jQuery Banner Rotator / Slideshow

jQuery Banner Rotator / Slideshow عبارة عن شريط تمرير بسيط جدًا لا يضحي بأي من الوظائف الأساسية.

فرص:

تلميحات الأدوات وإدخالات النص وما إلى ذلك.

معاينة وخيارات متنوعة لعرض المكونات

مؤقت مع تأخير لشريط تمرير واحد أو للجميع

انتقالات متعددة لجميع الشرائح أو انتقالات مختلفة لكل شريحة على حدة

يحتوي برنامج jQuery Banner Rotator / Slideshow على ميزات أساسية فقط مقارنةً بأشرطة تمرير jQuery الأخرى ، ولكن يجب ألا تنسى ذلك.

5. الكل في واحد المنزلق - البرنامج المساعد jQuery Slider سريع الاستجابة

أي شريط تمرير يظهر على الويب له رؤية فريدة خاصة به ويحل أي مشاكل في مجاله. لكن ليس هذا. يمكن تسمية شريط تمرير الكل في واحد بأنه "شامل كليًا".

أعتقد أن معظم مطوري ومصممي الويب لديهم حل مثبت ، لكنهم يبحثون دائمًا عن شيء جديد. وهذا "الشيء الجديد" يشمل:

محور دوار

معاينة لافتة

لافتة قائمة التشغيل

شريط تمرير المحتوى

دائري

تدعم جميع أنواع أشرطة التمرير معظم ، إن لم يكن كل ، الوظائف التي تتطلبها منزلقات jQuery. هل سيكون All In One Slider شاملًا لك؟

6. UnoSlider - شريط تمرير شاشة تعمل باللمس سريع الاستجابة

إذا كان شريط التمرير الخاص بك لا يستجيب ولا يدعم شاشات اللمس ، فلديك شريط التمرير الخطأ. UnoSlider هو الصحيح.

وجد شريط التمرير هذا مكانه في الشمس بين البساطة ومجموعة الميزات الغنية. المهام:

دعم الموضوع

12 موضوعات مسبقة الصنع

40 انتقالات

دعم IE6 +

جميع الميزات مع التركيز على التصميم والأناقة ، مما يجعل UnoSlider منزلق محتوى رائعًا مع إمكانية إضافة سمات.

7. Master Slider - شريط تمرير شاشة لمس jQuery

هل تبحث عن "شريط تمرير jQuery واحد للحكم عليهم جميعًا"؟ جرب Master Slider - شريط تمرير شاشة لمس jQuery لأحجام مختلفة للشاشة ...

عندما يتعلق الأمر بالتصميم الجيد ، فإن هذا المثال هو أحد أفضل الأمثلة:

أكثر من 25 قالبًا

انتقالات تسريع الأجهزة

اللمس واسحب الدعم

وأكثر بكثير

التحولات التفاعلية والطبقات المتحركة والنقاط الفعالة ستلفت انتباهك بالتأكيد. ماستر سلايدر هو عمل فني.

8. TouchCarousel - سكرولر وشريط تمرير محتوى jQuery

يجذب TouchCarousel بدعم وتحديثات مجانية. ومع ذلك ، فهذه ليست كل ميزات شريط تمرير jQuery carousel خفيف الوزن هذا.

إذا كان الاسم يحتوي على كلمة "touch" ، فيمكنك تخمين أن شريط التمرير مستجيب تمامًا ويدعم اللمس. ميزات أخرى:

تحسين محركات البحث

التشغيل التلقائي الذكي

تسارع انتقال أجهزة CSS3

واجهة مستخدم قابلة للتخصيص و 4 أشكال للفوتوشوب

يعد TouchCarousel ، نظرًا لتمريره المادي الفريد من نوعه ، مستوى جديدًا تمامًا من الخبرة على الأجهزة المحمولة.

9. متزلج متقدم - jQuery XML Slider

يمكن استخدام أشرطة تمرير jQuery لأكثر من مجرد مواقع ويب. يمكن أن تكون مفيدة أيضًا في تطبيقات الويب. يتيح لك شريط التمرير المتقدم القيام بذلك.

باستخدام ترميز HTML أو XML ، يترك شريط التمرير المتقدم هذا انطباعًا دائمًا:

طبقات متحركة وفيديو ذكي

100+ انتقالات و 150+ خصائص مخصصة

15 جلود منزلق و 7 أشكال من أسطح التمرير ودعم Lightbox الأصلي

التنقل بلوحة المفاتيح ودعم اللمس والتخصيص الكامل

وأكثر بكثير

ومع ذلك ، فإن أفضل ميزة هي Advanced Slider ، واجهة برمجة تطبيقات jQuery XML Slider ، والتي تجعل شريط التمرير الخيار الأمثل لتطبيق الويب الخاص بك.

10. jQuery Slider تكبير / تصغير تأثير مستجيب بالكامل

أحد أشرطة تمرير jQuery التي ستجعلك ترغب في مشاهدة عرض توضيحي قبل أن تبدأ في القراءة عن ميزاته. أنت فقط تريد أن تفهم ما يعنيه "تأثير التكبير / التصغير".

تأثير التكبير / التصغير ضعيف نوعًا ما ، لكنه يضيف إحساسًا بالتحكم ولمسة حقيقية للصورة بينما يكون باقي شريط التمرير ثابتًا. ميزات المنزلق:

انتقالات طبقة CSS3

خيار نهاية الرسوم المتحركة للطبقات

عرض ثابت وخيارات ملء الشاشة وعرض كامل

نص متحرك بتنسيق HTML و CSS

تحاول معظم أشرطة التمرير تجميع أكبر عدد ممكن من التأثيرات ، ولا يكون لـ jQuery Slider Zoom In / Out Effect Fully Responsive سوى تأثير Ken Burns ، ولكنه يتم تنفيذه جيدًا.

11. تطور jQuery Carousel

مثل Advanced Slider - jQuery XML Slider المذكور أعلاه ، يحتوي jQuery Carousel Evolution على واجهة برمجة تطبيقات خاصة به يمكن استخدامها لتحسين الوظائف أو دمج شريط التمرير في مشروع آخر.

جافا سكريبت. بداية سريعة

تعلم أساسيات JavaScript بمثال عملي لبناء تطبيق ويب

مع الصور وترميز HTML ومقاطع فيديو YouTube و Vimeo ، ستحصل أيضًا على:

تحسين محركات البحث

9 أنماط دائرية

تأثيرات الظل والانعكاس

يمكن تعديل حجم الصورة من الأمام والخلف

jQuery Carousel Evolution عبارة عن مكتبة بسيطة لها العديد من الاستخدامات.

12 مثير المتزلج

سلايدر مثير ليس مثيرًا كما كان من قبل. ومع ذلك ، نظرًا لعمره ، فإن شريط التمرير هذا جدير بالثقة.

للوهلة الأولى ، لا يكون شريط التمرير مثيرًا للإعجاب ، ولكن إذا تم تكوينه جيدًا ، فسوف يتناسب تمامًا مع التصميم الخاص بك. فرص:

شرائح التشغيل التلقائي

شرح الصورة

تشغيل الشريحة المستمر

6 آثار انتقالية

ينتظرك Sexy Slider لإطلاق قوته الكاملة وإطلاق العنان لإمكاناته.

13. jQuery Image & Content Scroller w / Lightbox

مع كل هذه التصميمات الملائمة للجوال ودعم شاشة اللمس ، من الجيد أن ترى شريط تمرير jQuery لم ينس سطح المكتب.

يدعم jQuery Image & Content Scroller w / Lightbox إدخال لوحة المفاتيح وعجلة الماوس ، من بين أشياء أخرى:

الاتجاه الأفقي والرأسي

تعليق نصي داخل أو خارج شريط التمرير

القدرة على تعيين عدد معين من الشرائح مرئية في وقت واحد

الصور المضمنة و Flash و iframe و Ajax والمحتوى المضمن

يحتوي شريط التمرير أيضًا على صندوق ضوئي مدمج. اختياريًا ، في jQuery Image & Content Scroller w / Lightbox ، لا يمكنك تشغيل شريط التمرير نفسه ، ولكن يمكنك تشغيل Lightbox بشكل منفصل.

14. شبه شفافة - مستجيبة بانر دوار / منزلق

معظم منزلقات jQuery لها تصميمها الخاص. يمكنك تخصيصه بنفسك ، لكن في بعض الأحيان تريد فقط أن يكون كل شيء داخل شريط التمرير. يتم تمثيل انتباهك بواسطة Translucent.

يحتوي شريط التمرير على الكثير من الإعدادات المسبقة. قد تحتاج فقط إلى ضبط إعدادات معينة وهذا كل شيء. فرص:

6 أنماط مختلفة

4 تأثيرات الانتقال

2 انتقالات انتقاد

أزرار وملصقات قابلة للتخصيص

مثل الآخرين ، يتم تمكين هذا المنزلق باللمس وسريع الاستجابة وتسريع الأجهزة. Translucent عبارة عن شريط تمرير بتصميم مبسط يضع المحتوى نفسه في المقدمة.

15. FSS - مكون إضافي لموقع انزلاقي ملء الشاشة

هل تريد إنشاء موقع ملء الشاشة باستخدام الشرائح؟ فأنت بحاجة إلى FSS.

في الواقع ، من السهل جدًا إنشاء موقع منزلق بملء الشاشة باستخدام شريط تمرير jQuery هذا. فرص:

دعم أجاكس

شريط التمرير

دعم تقنية الربط العميق

2 تأثيرات انتقالية مختلفة

يجدر أيضًا الانتباه إلى دعم لوحة المفاتيح ودليل مكون من 11 صفحة. ومع ذلك ، فإن الانطباع الحقيقي هو وزن FSS ، 5 ​​كيلو بايت فقط.

16. Zozo Accordion - شريط تمرير بشاشة تعمل باللمس استجابة

مثال آخر على شريط تمرير jQuery الذي يركز على النمط والذي يؤدي المهمة بشكل جيد. Zozo Accordion أمر لا بد منه لأي شخص يبحث عن منزلق أكورديون جيد لديه القدرة على تغيير الأنماط.

يحتوي جمال الرسوم المتحركة CSS3 أيضًا على مجموعة واسعة جدًا من الميزات:

الأكورديون الأفقي والرأسي

تحسين HTML5 الدلالي وتحسين محركات البحث

دعم اللمس ولوحة المفاتيح و WAI-ARIA

أكثر من 10 جلود و 6 تخطيطات

وأكثر بكثير

يتمتع Zozo Accordion بدعم مجاني وتحديثات مستمرة بالإضافة إلى جميع الميزات التي تريد رؤيتها في أكورديون jQuery.

17.jQuery Responsive OneByOne Slider Plugin

يعد المكون الإضافي لـ jQuery Responsive OneByOne Slider عبارة عن رسم متحرك بسيط أكثر من كونه شريط تمرير. بدلاً من عرض شريحة واحدة في كل مرة ، يملأ هذا المثال الشاشة بشكل تدريجي بالشرائح حتى لا يتبقى مكان في المنطقة قبل الانتقال إلى الشريحة التالية.

تعمل الرسوم المتحركة لـ CSS3 من داخل Animate.css ، فهي خفيفة الوزن وذات طبقات متعددة ومتوافقة مع الأجهزة المحمولة. ميزات متعددة:

يوجد أيضًا خيار التنقل بالسحب والإفلات. يتم تشغيل المكون الإضافي jQuery Responsive OneByOne Slider Plugin بواسطة دائري Twitter Bootstrap.

18. Accordionza - jQuery Plugin

لا يوجد شريط تمرير jQuery أسهل من هذا. لا يتطلب الأمر سوى 3 كيلو بايت من شريط التمرير ، مما يجعل أكورديونزا أخف منزلق من نوع الأكورديون.

إذا لم تعجبك خيارات الأنماط الثلاثة ، فيمكنك تعديل HTML و CSS بنفسك. فرص:

التنقل باستخدام لوحة المفاتيح

من السهل تخصيص التأثيرات والأزرار

تقنية التحسين التدريجي - تعمل بدون JavaScript

ضع في اعتبارك أن الأكورديونزا يمكنها عرض العديد من الأشكال المختلفة للمحتوى المختلط ، مما يجعلها مرنة للغاية.

19. mightySlider - متزلج متعدد الأغراض مستجيب

MightySlider هو شريط تمرير قوي حقًا. يمكن استخدامه ليس فقط كمنزلق بسيط للصور ، ولكن أيضًا كمنزلق بملء الشاشة أحادي الاتجاه مع التنقل في عنصر القائمة. باستخدامه ، يمكنك إنشاء موقع ويب رائع من صفحة واحدة.

تحت الغطاء ستجد العديد من الخيارات:

لوحة المفاتيح والماوس ودعم اللمس

تسارع انتقال أجهزة CSS3

ترميز صالح النظيف وتحسين SEO

شرائح وطبقات تسميات توضيحية وتأثيرات غير محدودة

واجهة برمجة التطبيقات قوية جدًا وسهلة المطورين ، مما يفتح مجموعة متنوعة من الطرق لاستخدامها. MightySlider عبارة عن شريط تمرير jQuery تقدمي ممتاز مع كود نظيف وجيد التعليق.

20. Parallax Slider - البرنامج المساعد jQuery المتجاوب

يعمل Parallax Slider مثل البرنامج المساعد jQuery Responsive OneByOne Slider Plugin ويسمح لك بتحريك كل طبقة بشكل منفصل داخل نفس الشريحة. يمكنك تحريك جميع الشرائح أو حتى شريحة واحدة فقط عن طريق إضافة الرسوم المتحركة المنظر.

تأتي العدة مع 4 منزلقات من أنواع مختلفة ، وكلها ذات تأثير اختلاف المنظر. مثل منزلقات jQuery الأخرى ، فهو يحتوي على:

التخصيص الكامل

دعم اللمس

طبقات غير محدودة سريعة الاستجابة

التشغيل التلقائي ، والتكرار ، وتعديل الارتفاع والعرض ، والمؤقت

الطبقات المتحركة ليست مجرد نصوص أو صور. يمكنك أيضًا إضافة مقاطع فيديو YouTube و Vimeo و HTML5. Parallax Slider هو مثال جيد آخر على كيفية محاكاة تأثيرات Flash بشكل أفضل من Flash نفسه ، وهو مدعوم أيضًا على جميع الأجهزة.

خاتمة

من المثير للاهتمام أن نرى كيف نمت أشرطة تمرير jQuery من شيء يستبدل صورة بأخرى ، إلى مجموعة ضخمة من الأدوات الإبداعية. يوجد الآن منزلقات ثلاثية الأبعاد ومزلاقات المنظر وشرائح منزلقة كاملة للصفحة وشرائح منزلقة سريعة الاستجابة وتلك التي يمكن عرضها على كل من أجهزة كمبيوتر سطح المكتب والهواتف الذكية.

إذا لم تعجبك أيًا من أشرطة التمرير الموجودة في هذه القائمة ، فيمكنك دائمًا الاطلاع على برنامج jQuery Code التعليمي على Envato وتطوير شيء جديد تمامًا وفريد ​​من نوعه.

أو تحقق من أشرطة التمرير الأخرى في سوق Envato للاختيار من بينها. ما هو شريط تمرير jQuery المفضل لديك ولماذا؟

نحتاج إلى شريط تمرير بسيط مع التمرير التلقائي. هيا بنا نبدأ...

وصف المنزلق.

سيتم اصطفاف الشرائح ، وبعد فترة زمنية معينة سيتم تمريرها.

يُظهر الإطار الأحمر الجزء المرئي من شريط التمرير.

في نهاية شريط التمرير ، تحتاج إلى تكرار الشريحة الأولى. يعد ذلك ضروريًا لضمان التمرير من الشريحة الثالثة إلى الأولى. تحتاج أيضًا إلى إضافة الشريحة الأخيرة إلى البداية بحيث يمكنك التمرير للخلف من الشريحة الأولى إلى الشريحة الثالثة. يظهر شريط التمرير في الاتجاه الأمامي أدناه.

عندما يصل شريط التمرير إلى النهاية ، يتم وضع نسخته من بداية شريط التمرير على الفور بدلاً من الشريحة الأخيرة. ثم تتكرر الدورة مرة أخرى. هذا يخلق وهم المنزلق اللانهائي.

ترميز HTML

أولاً ، لنقم بعمل شريط تمرير بسيط باستخدام التمرير التلقائي. يحتاج إلى حاويتين للعمل. الأول سيحدد حجم المنطقة المرئية من شريط التمرير ، والثاني ضروري لوضع أشرطة التمرير فيه. سيبدو تخطيط شريط التمرير كما يلي:

> >

أنماط المنزلق

.slider-box (العرض: 320 بكسل ؛ الارتفاع: 210 بكسل ؛ الفائض: مخفي ؛). منزلق (الموضع: نسبي ؛ العرض: 10000 بكسل ؛ الارتفاع: 210 بكسل ؛).

الحاوية. مربع التمرير يحدد حجم شريط التمرير. الخاصية overflow: hidden تخفي كل العناصر التي ليست ضمن النطاق داخل العنصر.

تم ضبط شريط التمرير الحاوية على عرض كبير. يعد هذا ضروريًا لتلائم جميع الشرائح فيه.

تتم محاذاة الشرائح باستخدام خاصية float: left.

يظهر التخطيط التخطيطي للكتل المنزلق أدناه.

النصي

ستتم حركة الشرائح عن طريق تغيير خاصية margin-left of the container.slider بسلاسة.

$ (function () (var width = $ (". slider-box") .width ()؛ // عرض المنزلق.الفاصل الزمني = 4000 ؛ // الفاصل الزمني لتغيير الشرائح.$ (". slider img: last") .clone () .prependTo (".slider")؛ // يتم وضع نسخة من الشريحة الأخيرة في البداية.$ () .eq (1) .clone () .appendTo (".slider") ؛ // يتم وضع نسخة من الشريحة الأولى في النهاية. // تم إزاحة Container.slider إلى اليسار بعرض شريحة واحدة. setInterval ("الرسوم المتحركة ()" ، الفاصل الزمني) ؛ // يقوم بتشغيل وظيفة الرسوم المتحركة () لتنفيذ انتقال الشريحة.)) ؛ وظيفة الرسوم المتحركة () (var margin = parseInt ($ (". slider") .css ("marginLeft")) ؛ // كتلة offset.slider الحاليةالعرض = $ (". slider-box") .width ()، // عرض المنزلق. slidersAmount = $ (". شريط التمرير") .children () .length؛ // عدد الشرائح في شريط التمرير.إذا (الهامش! = (- العرض * (المقدار المتزلجون- 1))) // إذا لم تكن الشريحة الحالية هي الأخيرة ،(الهامش = عرض الهامش ؛ // ثم يتم تقليل قيمة الهامش بعرض الشريحة.) آخر ( // إذا تم عرض الشريحة الأخيرة ،$ (". شريط التمرير") .css ("margin-left"، -width)؛ // ثم يعود block.slider إلى موضعه الأولي ،الهامش = - العرض * 2 ؛ ) $ (". slider") .animate ((marginLeft: margin)، 1000)؛ يتحرك // Block.slider إلى اليسار بمقدار شريحة واحدة. } ;

والنتيجة هي شريط تمرير بسيط مع تمرير تلقائي لانهائي.

بادئ ذي بدء ، تمت كتابة هذه المقالة بهدف شرح كيفية إنشاء شريط تمرير صورة لصفحات الويب. هذه المقالة ليست تعليمية بطبيعتها بأي حال من الأحوال ، فهي تعمل فقط كمثال لكيفية تنفيذ موضوعنا. يمكنك استخدام الكود المقدم في هذه المقالة كنوع من النموذج لمثل هذه التطورات ، وآمل أن أكون قادرًا على أن أنقل للقارئ بتفاصيل كافية وبطريقة يسهل الوصول إليها جوهر ما كتبته بالكامل.

والآن إلى هذه النقطة ، منذ وقت ليس ببعيد كنت بحاجة إلى وضع شريط تمرير على موقع واحد ، ولكن عندما بحثت في الإنترنت عن نصوص جاهزة ، لم أجد أي شيء يستحق العناء ، لأن. لم يعمل البعض كما أحتاج ، بينما لم يبدأ البعض الآخر على الإطلاق بدون أخطاء في وحدة التحكم. يستخدم ملحقات jQueryبالنسبة إلى شريط التمرير ، بدا لي أنه غير ممتع للغاية ، لأن. على الرغم من أنني سأحل المشكلة في هذا الأمر ، إلا أنه لن يكون لدي أي فهم لتشغيل هذه الآلية ، واستخدام المكون الإضافي من أجل شريط تمرير واحد ليس هو الأمثل. لم أرغب أيضًا في فهم النصوص الملتوية ، لذلك قررت كتابة السيناريو الخاص بي لشريط التمرير ، والذي سأقوم بترميزه بنفسي حسب حاجتي.

أولاً ، نحتاج إلى اتخاذ قرار بشأن منطق شريط التمرير نفسه ، ثم المضي قدمًا في التنفيذ ، في هذه المرحلة من المهم جدًا أن يكون لدينا فهم واضح لتشغيل هذه الآلية ، لأنه بدونها لا يمكننا كتابة رمز يعمل بالضبط بالطريقة التي نريدها.

سيكون هدفنا الرئيسي منفذ العرض، أي الكتلة التي سنرى فيها كيف تدور صورنا ، سيكون لدينا فيها المجمع الشرائح، ستكون هذه الكتلة الخاصة بنا التي تحتوي على جميع الصور المصطفة في سطر واحد ، والتي ستغير موضعها داخل منفذ العرض.


علاوة على ذلك ، على الجانبين من الداخل منفذ العرض، عموديًا في المنتصف ، سيكون هناك أزرار ذهابًا وإيابًا ، عند النقر عليها ، سنقوم أيضًا بتغيير موضع المجمع الشرائحنسبيا منفذ العرض، مما يتسبب في تأثير تمرير الصور. وأخيرًا ، سيكون العنصر الأخير هو أزرار التنقل الموجودة في الجزء السفلي منفذ العرض.


عند النقر عليها ، سننظر ببساطة إلى الرقم التسلسلي لهذا الزر وننتقل إلى الشريحة التي نحتاجها مرة أخرى عن طريق التبديل المجمع الشرائح(سيتم إجراء التحول من خلال التغيير تحويل خصائص المغلق، سيتم احتساب قيمتها باستمرار).

أعتقد أن منطق هذا الأمر برمته يجب أن يكون واضحًا بعد ما قلته أعلاه ، ولكن إذا كان لا يزال هناك سوء تفاهم في مكان ما ، فسيتم توضيح كل شيء في الكود ، ما عليك سوى القليل من الصبر.

الآن دعنا نكتب! أولاً ، دعنا نفتح ملف ملف الفهرسواكتب الترميز الذي نحتاجه هناك:

• 
• 
• 
• 

كما ترون ، لا شيء معقد بلوك لشريط التمريربمثابة نفس الكتلة التي سيتم وضع شريط التمرير فيها ، بداخله موجود بالفعل منفذ العرضالذي يحتوي على المجمع الشرائح، المعروفة أيضًا باسم القائمة المتداخلة ، هنا ليهي شرائح و IMG- صور بداخلها. يرجى الانتباه إلى حقيقة أن جميع الصور يجب أن تكون من نفس الحجم أو على الأقل النسب ، وإلا سيبدو شريط التمرير ملتويًا. أبعادها تعتمد بشكل مباشر على نسب الصورة.

نحتاج الآن إلى تبسيط كل شيء ، عادةً لا يتم التعليق على الأنماط بشكل خاص ، لكنني قررت التركيز على هذا ، حتى لا يكون هناك سوء فهم في المستقبل.

body (margin: 0؛ padding: 0؛) # block-for-slider (width: 800px؛ margin: 0 auto؛ margin-top: 100px؛) #viewport (width: 100٪؛ display: table؛ position: النسبي ؛ تجاوز: مخفي ؛ -webkit-user-select: none ؛ -moz-user-select: none ؛ -ms-user-select: none ؛ -o-user-select: none ؛ user-select: none ؛) #slidewrapper ( الموضع: نسبي ؛ العرض: احسب (100٪ * 4) ؛ أعلى: 0 ؛ يسار: 0 ؛ الهامش: 0 ؛ الحشو: 0 ؛ -مجموعة الويب-الانتقال: 1 ثانية ؛ -o-الانتقالية: 1 ثانية ؛ الانتقال: 1 ثانية ؛ -مجموعة ويب -وظيفة توقيت الانتقال: easy-in-out ؛ -o-transfer-time-function: easy-in-out ؛ انتقال-توقيت-وظيفة: easy-in-out ؛) # slidewrapper ul ، #slidewrapper li (هامش : 0؛ padding: 0؛) #slidewrapper li (width: calc (100٪ / 4)؛ list-style: none؛ display: inline؛ float: left؛) .slide-img (width: 100٪؛)

دعنا نبدء ب بلوك لشريط التمريرأكرر ، هذه هي الكتلة الخاصة بنا على الصفحة ، والتي سنقوم بتعيينها أسفل شريط التمرير ، وسيعتمد ارتفاعها على عرضها ونسب صورتنا ، لأن منفذ العرضتحتل العرض بالكامل بلوك لشريط التمريرثم نفسه الانزلاقلها نفس العرض ، وبالتالي فإن الصورة الموجودة بداخلها تغير ارتفاعها اعتمادًا على العرض (يتم الاحتفاظ بالنسب). لقد وضعت هذا العنصر على صفحتي أفقيًا في المنتصف ، بمسافة بادئة 100 بكسل من أعلى ، مما يجعل موضعه أكثر ملاءمة للمثال.

جزء منفذ العرض، كما ذكرنا سابقًا ، يحتل العرض الكامل لملف بلوك لشريط التمرير، لديها الخاصية إخفاء الفائض، سيسمح لنا بإخفاء موجز الصور الخاص بنا الذي يتجاوز إطار العرض.


التالي خاصية css - تحديد المستخدم: لا شيء، يتيح لك التخلص من التظليل الأزرق للعناصر الفردية في شريط التمرير بنقرات متعددة على الأزرار.

هيا بنا نمضي قدما ل المجمع الشرائحلماذا الموقف: نسبي، لكن لا مطلق؟ كل شيء بسيط للغاية ، لأن. إذا اخترنا الخيار الثاني ، ثم مع الخاصية تجاوز منفذ العرض: مخفيلن يبدو لنا أي شيء ، tk. نفسي منفذ العرضلن تتكيف مع الارتفاع المجمع الشرائح، بسبب ذلك سيكون لها الارتفاع: 0. لماذا العرض مهم ولماذا نضعه على الإطلاق؟ النقطة المهمة هي أن عرض الشرائح يساوي 100٪ من منفذ العرض، ولترتيبهم في خط ، نحتاج إلى مكان حيث سيقفون ، وبالتالي العرض المجمع الشرائحيجب أن يساوي عرض منفذ العرض بنسبة 100٪مضروبة في عدد الشرائح (4 في حالتي). بخصوص انتقالو وظيفة توقيت الانتقالثم هنا 1 ثانيةيعني هذا التغيير في الموقف المجمع الشرائحسيحدث في غضون ثانية واحدة وسنلاحظه ، و سهولة في الخروج- نوع من الرسوم المتحركة تسير فيه ببطء في البداية ، وتتسارع إلى المنتصف ، ثم تبطئ مرة أخرى ، هنا يمكنك بالفعل تعيين القيم الخاصة بك.

المجموعة التالية من مجموعات الخصائص المجمع الشرائحوعناصرها الفرعية غير مبطن ، التعليقات لا لزوم لها هنا.

بعد ذلك ، سنقوم بتصميم الشرائح ، ويجب أن يكون عرضها مساويًا للعرض منفذ العرض، ولكن هم في المجمع الشرائح، التي يساوي عرضها عرض منفذ العرض مضروبًا في عدد الشرائح ، ثم للحصول على العرض منفذ العرضمرة أخرى ، نحتاج إلى 100٪ من العرض المجمع الشرائحقسّم على عدد الشرائح (في حالتي ، مرة أخرى ، على 4). بعد أن نحولها إلى عناصر مضمنة باستخدام عرض: مضمنةوضبط الالتفاف على اليسار عن طريق إضافة الخاصية تعويم: اليسار. طليعة على غرار القائمة: لا شيءأستطيع أن أقول إنني أستخدمه لإزالة العلامة الافتراضية من لي، في معظم الحالات هو نوع من المعايير.

وبالتالي شريحة - IMGالأمر بسيط ، ستشغل الصورة العرض بالكامل الانزلاق, الانزلاقتتكيف مع ارتفاعها المجمع الشرائحالتكيف مع الارتفاع الانزلاقوالارتفاع منفذ العرضبدوره سوف تأخذ قيمة الارتفاع المجمع الشرائح، وبالتالي فإن ارتفاع شريط التمرير الخاص بنا سيعتمد على نسب الصورة وحجم الكتلة المتوفرة لشريط التمرير ، والذي كتبته بالفعل أعلاه.

أعتقد أننا اكتشفنا الأنماط في هذا الأمر ، في الوقت الحالي سنقوم بعرض شرائح بسيط بدون أزرار ، وبعد التأكد من أنه يعمل بشكل صحيح ، سنضيفها ونصممها.

دعونا نفتح ملف js، والتي ستحتوي على رمز شريط التمرير ، لا تنسَ تضمينها مسج، لأن سنكتب باستخدام هذا الإطار. بالمناسبة ، في وقت كتابة هذه السطور ، أستخدم الإصدار مسج 3.1.0. يجب تضمين الملف نفسه مع البرنامج النصي في نهاية العلامة الجسم، لأن سنعمل مع عناصر DOM التي يجب تهيئتها أولاً.

في الوقت الحالي ، نحتاج إلى الإعلان عن متغيرين ، أحدهما سيخزن رقم الشريحة التي نراها في نقطة زمنية معينة أثناء منفذ العرضلقد ناديتها الانزلاق، والثاني سيخزن عدد هذه الشرائح بالذات ، هذا slideCount.

var slideNow = 1 ؛ var slideCount = $ ("# slidewrapper"). children (). length)؛

عامل الانزلاقمن الضروري تعيين القيمة الأولية على 1 ، لأن عندما يتم تحميل الصفحة ، بناءً على الترميز الخاص بنا ، سنرى الشريحة الأولى في منفذ العرض.

في slideCountسنضع عدد الأطفال المجمع الشرائح، كل شيء منطقي هنا.
بعد ذلك ، تحتاج إلى إنشاء وظيفة تكون مسؤولة عن تبديل الشرائح من اليمين إلى اليسار ، دعنا نعلن ذلك:

الوظيفة nextSlide () ()

سوف نسميها في الجزء الرئيسي من الكود الخاص بنا ، والذي سنصل إليه ، ولكن في الوقت الحالي سنخبر وظيفتنا بما يجب القيام به:

الوظيفة nextSlide () (إذا كانت (slideNow == slideCount || slideNow<= 0 || slideNow >slideCount) ($ ("# slidewrapper"). css ("transform"، "translate (0، 0)")؛ slideNow = 1؛) else (translateWidth = - $ ("# viewport"). width () * ( slideNow)؛ $ ("# slidewrapper"). css (("التحويل": "ترجم (" + translateWidth + "px، 0)"، "-webkit-transform": "translate (" + translateWidth + "px، 0 ) "،" -ms-transform ":" translate ("+ translateWidth +" px، 0) "،))؛ slideNow ++؛))

أولاً ، نتحقق مما إذا كنا حاليًا في الشريحة الأخيرة من خلاصتنا؟ للقيام بذلك ، نأخذ عدد الشرائح المستخدمة $ ("# slidewrapper"). children (). lengthومقارنتها مع رقم الشريحة الخاصة بنا ، إذا كانت متساوية ، فهذا يعني أننا نحتاج إلى بدء إظهار الشريط مرة أخرى ، من شريحة واحدة ، مما يعني أننا نغير تحويل خاصية cssفي المجمع الشرائحعلى ال ترجم (0، 0)، وبالتالي تحويلها إلى موضعها الأصلي بحيث تكون الشريحة الأولى في مجال رؤيتنا ، دعونا أيضًا لا ننسى --webkit و-msلعرض ملائم عبر المستعرض (انظر مرجع خاصية css). بعد ذلك ، لا تنس تحديث قيمة المتغير الانزلاق، وإبلاغها أن الشريحة رقم 1 معروضة: slideNow = 1 ؛

يتضمن نفس الشرط التحقق من أن رقم الشريحة التي نراها ضمن عدد الشرائح الخاصة بنا ، ولكن إذا لم يتم ذلك بطريقة ما ، فسنرجع إلى الشريحة الأولى مرة أخرى.

إذا لم يتم استيفاء الشرط الأول ، فهذا يعني أننا لسنا حاليًا في الشريحة الأخيرة ولا في حالة غير موجودة ، مما يعني أننا بحاجة إلى التبديل إلى الشرط التالي ، سنفعل ذلك عن طريق التحول المجمع الشرائحغادر بقيمة مساوية للعرض منفذ العرض، سيحدث التحول مرة أخرى من خلال الخاصية المألوفة يترجم، التي ستكون قيمتها مساوية ل "ترجمة (" + translateWidth + "px، 0)"، أين ترجمةهي المسافة التي لدينا المجمع الشرائح. بالمناسبة ، دعنا نعلن عن هذا المتغير في بداية الكود:

var translateWidth = 0 ؛

بعد الانتقال إلى الشريحة التالية ، دعنا نقول للشريحة الآن أننا نرى الشريحة التالية على التوالي: slideNow ++ ؛

في هذه المرحلة ، قد يتساءل بعض القراء عن سبب عدم استبدالنا $ ("# viewport"). width ()لبعض المتغيرات ، على سبيل المثال عرض الشرائحلجعل عرض الشريحة الخاصة بنا في متناول اليد دائمًا؟ الإجابة بسيطة جدًا ، إذا كان موقعنا قابلاً للتكيف ، فحينئذٍ تكون الكتلة المخصصة لشريط التمرير قابلة للتكيف أيضًا ، بناءً على ذلك ، يمكننا أن نفهم أنه عند تغيير حجم عرض النافذة دون إعادة تحميل الصفحة (على سبيل المثال ، قلب الهاتف على جانبها) ، العرض منفذ العرضسيتغير ، وبالتالي ، سيتغير عرض شريحة واحدة. في هذه الحالة ، لدينا المجمع الشرائحسيتم تحويلها إلى قيمة العرض التي كانت في الأصل ، مما يعني أنه سيتم عرض الصور في أجزاء أو لن يتم عرضها على الإطلاق منفذ العرض. الكتابة في وظيفتنا $ ("# viewport"). width ()بدلا من عرض الشرائحنجعلها تحسب العرض في كل مرة تقوم فيها بتبديل الشرائح منفذ العرض، وبالتالي توفير تغيير حاد في عرض الشاشة ، والتمرير إلى الشريحة التي نحتاجها.

ومع ذلك ، فقد كتبنا الوظيفة ، والآن نحتاج إلى استدعائها بعد فترة زمنية معينة ، ويمكننا أيضًا تخزين الفاصل الزمني في متغير ، بحيث إذا أردنا تغييره ، فقم بتغيير قيمة واحدة فقط في الكود:

var slideInterval = 2000 ؛

يتم تحديد الوقت بالمللي ثانية.

الآن دعنا نكتب الهيكل التالي:

$ (document) .ready (function () (setInterval (nextSlide، slideInterval)؛))؛

كل شيء ليس أسهل في أي مكان ، نحن من خلال التصميم $ (مستند). جاهز (الوظيفة () ())نقول أنه يجب تنفيذ الإجراءات التالية بعد تحميل المستند بالكامل. بعد ذلك ، نسمي الدالة ببساطة الشريحة التاليةبفاصل زمني يساوي الشريحة، باستخدام الوظيفة المضمنة تعيين الفاصل الزمني.

بعد كل الخطوات التي قمنا بها أعلاه ، يجب أن يدور شريط التمرير الخاص بنا بشكل مثالي ، ولكن إذا حدث خطأ ما بالنسبة لك ، فقد تكون المشكلة إما في الإصدار مسج، أو الاتصال الخاطئ لأية ملفات. ليس من الضروري أيضًا استبعاد احتمال ارتكاب خطأ في مكان ما في الكود ، لذلك لا يمكنني إلا أن أنصحك بالتحقق من كل شيء مرة أخرى.


في غضون ذلك ، دعنا ننتقل ، ونضيف إلى شريط التمرير وظيفة مثل إيقاف التمرير عند التمرير فوقها ، لذلك نحتاج إلى الكتابة في الكتلة الرئيسية من التعليمات البرمجية (داخل الإنشاء $ (المستند). جاهز (الوظيفة () ()))شيء من هذا القبيل:

$ ("# viewport"). hover (function () (clearInterval (switchInterval) ؛) ، function () (switchInterval = setInterval (nextSlide، slideInterval) ؛)) ؛

لبدء تحليل هذا الرمز ، نحتاج إلى معرفة ما هو التبديل. أولاً ، هذا متغير يخزن استدعاءً دوريًا لوظيفة nextSlide ، ببساطة ، لدينا هذا السطر من الكود: setInterval (nextSlide، slideInterval) ؛، تحولت إلى هذا: switchInterval = setInterval (nextSlide، slideInterval) ؛. بعد هذه التلاعبات ، اتخذت الكتلة الرئيسية من التعليمات البرمجية الشكل التالي:

$ (وثيقة). nextSlide، slideInterval)؛))؛))؛

أنا هنا أستخدم الحدث يحوم، وهو ما يعني "عند التمرير" ، يتيح لك هذا الحدث تتبع اللحظة التي أحوم فيها فوق كائن ، وفي هذه الحالة على منفذ العرض.

بعد التمرير ، قمت بمسح الفاصل الزمني الذي سأشير إليه بين قوسين (هذا هو منطقتنا التبديل) ، ثم مفصولة بفاصلات ، أكتب ما سأفعله عندما أحرك المؤشر للخلف ، في هذه الكتلة أعينه مرة أخرى إلى التبديلاستدعاء وظيفة دورية الشريحة التالية.

الآن ، إذا تحققنا ، يمكننا أن نرى كيف يتفاعل شريط التمرير الخاص بنا مع التمرير ، وإيقاف الشرائح من التبديل.

لذا حان الوقت لإضافة أزرار إلى شريط التمرير الخاص بنا ، فلنبدأ بأزرار للخلف وللأمام.

دعونا نحتفل بها أولاً:

• 
• 
• 
• 

في البداية ، قد يكون هذا الترميز غير مفهوم ، وسأقول على الفور أنني قمت بلف هذين الزرين في واحد شعبةمع الفصل prev-next-btnsفقط من أجل راحتك ، لا يمكنك القيام بذلك ، ولن تتغير النتيجة ، والآن سنضيف أنماطًا إليها وسيصبح كل شيء واضحًا:

# prev-btn، # next-btn (الموضع: مطلق ؛ العرض: 50 بكسل ؛ الارتفاع: 50 بكسل ؛ لون الخلفية: #fff ؛ نصف قطر الحد: 50٪ ؛ أعلى: احسب (50٪ - 25 بكسل) ؛) # prev- btn: hover، # next-btn: hover (cursor: pointer؛) # prev-btn (left: 20px؛) # next-btn (right: 20px؛)

أولاً نضع أزرارنا عبر الموقف: مطلق، وبالتالي سوف نتحكم بحرية في موقعهم داخل منطقتنا منفذ العرض، ثم حدد أحجام هذه الأزرار واستخدامها نصف قطر الحدحول الزوايا بحيث تتحول هذه الأزرار إلى دوائر. سيكون لونهم أبيض ، هذا هو #fff، والمسافة البادئة الخاصة بهم من الحافة العلوية منفذ العرضسيساوي نصف ارتفاع هذا منفذ العرضناقص نصف ارتفاع الزر نفسه (25 بكسل في حالتي) ، حتى نتمكن من توسيطها عموديًا. بعد ذلك ، سنحدد أنه عند التمرير فوقها ، سيتغير المؤشر إلى المؤشروأخيرًا ، دعنا نقول لأزرارنا بشكل فردي أنه يجب إعادتها بمقدار 20 بكسل من حوافها حتى نتمكن من رؤيتها بالطريقة التي نريدها.

مرة أخرى ، يمكنك تصميم عناصر الصفحة بالطريقة التي تريدها ، وسأقدم فقط مثالاً على الأنماط التي قررت استخدامها.

بعد التصميم ، يجب أن يبدو شريط التمرير كما يلي:


بعد ذلك ، نعود إلى js، حيث نصف كيفية عمل أزرارنا. حسنًا ، دعنا نضيف وظيفة أخرى ، ستظهر لنا الشريحة السابقة:

الوظيفة prevSlide () (إذا (slideNow == 1 || slideNow<= 0 || slideNow >slideCount) (translateWidth = - $ ("# viewport"). width () * (slideCount - 1)؛ $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px، 0 ) "،" -webkit-transform ":" translate ("+ translateWidth +" px، 0) "،" -ms-transform ":" translate ("+ translateWidth +" px، 0) "،))؛ slideNow = slideCount؛) else (translateWidth = - $ ("# viewport"). width () * (slideNow - 2)؛ $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px ، 0) "،" -webkit-transform ":" translate ("+ translateWidth +" px، 0) "،" -ms-transform ":" translate ("+ translateWidth +" px، 0) "،))؛ slideNow--؛))

تسمى prevSlide، سيتم استدعاؤه فقط عند النقر فوق prev btn. أولاً نتحقق مما إذا كنا في الشريحة الأولى أم لا ، وهنا نتحقق أيضًا مما إذا كان ملف الانزلاقخارج حدود النطاق الحقيقي لشرائحنا ، وفي حالة نجاح أحد الشروط ، فسننتقل إلى الشريحة الأخيرة ، مع التحول المجمع الشرائحإلى القيمة التي نحتاجها. سنحسب هذه القيمة باستخدام الصيغة: (عرض شريحة واحدة) * (عدد الشرائح - 1) ، نأخذ كل هذا بعلامة ناقص ، لأن بتحويله إلى اليسار ، اتضح أن منفذ العرضسيظهر لنا الآن الشريحة الأخيرة. في نهاية هذه الكتلة ، نحتاج أيضًا أن نقول للمتغير الانزلاقأن لدينا الآن الشريحة الأخيرة في مجال رؤيتنا.

إذا لم نكن في الشريحة الأولى ، فسنحتاج إلى إرجاع 1 للخلف ، لذلك نقوم بتغيير الخاصية مرة أخرى انزلاق التحويل. الصيغة هي: (عرض شريحة واحدة) * (رقم الشريحة الحالية - 2) ، كل هذا ، مرة أخرى ، يؤخذ بعلامة الطرح. ولكن لماذا -2 ، وليس -1 ، هل نحتاج إلى إعادة نفس الشريحة الواحدة للخلف؟ الحقيقة هي أننا إذا كنا ، على سبيل المثال ، في الشريحة الثانية ، فعندئذٍ المتغير xالخصائص تحويل: ترجم (س ، 0)لنا المجمع الشرائحيساوي بالفعل عرض شريحة واحدة ، إذا قلنا له أننا بحاجة إلى طرح 1 من رقم الشريحة الحالية ، فسنحصل مرة أخرى على الوحدة التي قمنا بإزاحتها بالفعل المجمع الشرائح، لذلك سوف تحتاج إلى التحول بمقدار 0 في هذه العروض ذاتها منفذ العرض، وهو ما يعني في slideNow - 2.

نحتاج الآن إلى إضافة هذه الأسطر إلى الكتلة الرئيسية للشفرة:

$ ("# next-btn"). انقر (الوظيفة () (nextSlide () ؛)) ؛ $ ("# prev-btn"). انقر (الوظيفة () (prevSlide () ؛)) ؛

نحن هنا ببساطة نتتبع ما إذا كان قد تم إجراء نقرة على أزرارنا ، وفي هذه الحالة نسمي الوظائف التي نحتاجها ، كل شيء بسيط ومنطقي.

الآن دعنا نضيف أزرار التنقل بين الشرائح ، ونرجع إلى الترميز مرة أخرى:

• 
• 
• 
• 

كما ترون ، في الداخل منفذ العرضظهرت قائمة متداخلة ، أعطها معرّفًا nav-btns، داخله لي- أزرار التنقل الخاصة بنا ، سنخصص فئة لهم الشريحة-nav-btn، ومع ذلك ، يمكنك الانتهاء من الترميز ، دعنا ننتقل إلى الأنماط:

# nav-btns (الوضع: مطلق ؛ العرض: 100٪ ؛ الجزء السفلي: 20 بكسل ؛ الحشو: 0 ؛ الهامش: 0 ؛ محاذاة النص: المركز ؛). نمط القائمة: لا شيء ؛ العرض: 20 بكسل ؛ الارتفاع: 20 بكسل ؛ لون الخلفية: #fff ؛ نصف قطر الحدود: 50٪ ؛ الهامش: 3 بكسل ؛). slide-nav-btn: hover (المؤشر: المؤشر ؛)

بلوك nav-btns، حيث توجد أزرارنا ، نعطي العقار الموقف: مطلقحتى لا تمتد منفذ العرضفي الارتفاع لأن في المجمع الشرائحخاصية الموقف: نسبي، نضبط العرض على 100٪ بحيث يكون محاذاة النص: وسطأزرار الوسط أفقيًا بالنسبة إلى منفذ العرض، ثم استخدام الخاصية الأسفلنوضح للكتلة أنه يجب أن تكون على مسافة 20 بكسل من الحافة السفلية.

باستخدام الأزرار ، نفعل نفس الشيء كما هو الحال مع الشرائح ، لكننا نطلبها الآن عرض: مضمنة كتلة، لأن في عرض: مضمنةلا يستجيبون له العرضو ارتفاع، لأن هم في كتلة موقف تماما. سنجعل لونهم أبيض وبمساعدة الأشخاص المألوفين لدينا بالفعل نصف قطر الحددعونا نعطيهم شكل دائرة. عند التمرير فوقها ، سنقوم بتغيير مظهر المؤشر الخاص بنا للعرض المعتاد.

والآن دعنا نبدأ مسج - أجزاء:
أولاً ، دعنا نعلن عن متغير navBtnId ، والذي سيخزن فهرس الزر الذي نقرنا عليه:

var navBtnId = 0 ؛
$ (". slide-nav-btn"). انقر فوق (function () (navBtnId = $ (this) .index () ؛ if (navBtnId + 1! = slideNow) (translateWidth = - $ ("# viewport"). width () * (navBtnId)؛ $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px، 0)"، "-webkit-transform": "translate (" + translateWidth + "px، 0)"، "-ms-transform": "translate (" + translateWidth + "px، 0)"،))؛ slideNow = navBtnId + 1؛)))؛

نحن هنا عندما تنقر على الشريحة-nav-btnاستدعاء دالة تقوم بتعيين متغير أولاً navBtnIdفهرس الزر الذي تم النقر عليه ، أي الرقم التسلسلي الخاص به ، حيث يبدأ العد التنازلي من الصفر ، ثم إذا نقرنا على الزر الثاني ، ثم في navBtnIdتم كتابة القيمة 1. بعد ذلك ، نقوم بإجراء فحص ، حيث نضيف واحدًا إلى الرقم الترتيبي للزر للحصول على هذا الرقم ، كما لو لم يكن العد التنازلي من 0 ، ولكن من 1 ، نقارن هذا الرقم مع الرقم من الشريحة الحالية ، إذا كانت متطابقة ، فلن نتخذ أي إجراء ، لأن الشريحة المطلوبة موجودة بالفعل منفذ العرض.

إذا كانت الشريحة التي نحتاجها ليست في العرض منفذ العرض، ثم نحسب المسافة التي نحتاج إلى التحول بها المجمع الشرائحجهة اليسار ، ثم غيّر القيمة تحويل خصائص css للترجمة(نفس المسافة بالبكسل ، 0). لقد فعلنا هذا بالفعل أكثر من مرة ، لذا لا ينبغي أن تثار أسئلة. في النهاية ، نحفظ مرة أخرى قيمة الشريحة الحالية في متغير الانزلاق، يمكن حساب هذه القيمة بإضافة واحد إلى فهرس الزر الذي تم النقر عليه.

هذا ، في الواقع ، كل شيء ، إذا كان هناك شيء غير واضح ، فأنا أترك رابطًا إلى jsfiddle ، حيث سيتم توفير كل الكود المكتوب في المادة.

شكرا للاهتمام!

العلامات:

• مسج المنزلق
• المغلق
• الرسوم المتحركة css3
• لغة البرمجة

اضف اشارة

هذا شريط تمرير باللمس سريع الاستجابة مكتوب في jQuery. يستخدم محرك هذا المكون الإضافي الرسوم المتحركة CSS3 ، ولكن في نفس الوقت ، يتم توفير احتياطيات للإصدارات القديمة من المتصفحات. Glide.js بسيط وخفيف الوزن.

إستعمال

1. تضمين jQuery

التبعية الوحيدة للمكوِّن الإضافي هي jQuery ، والتي يجب علينا تضمينها أولاً:

2. تضمين Glide.js

3. أضف لغة تأشير النص الفائق

دعنا نربط الأنماط الأساسية.

دعنا نشمر عن بنية html لشريط التمرير.

4. التهيئة

جاري تشغيل شريط التمرير بالإعدادات الافتراضية ...

... أو تخصيصه لنفسك

إعدادات

قائمة الخيارات المتاحة:

معامل	القيمة الافتراضية	اكتب	وصف
تشغيل تلقائي	4000	كثافة العمليات / منطقي	التمرير التلقائي (خطأ للتعطيل)
hoverpause	صحيح	منطقي	أوقف التمرير التلقائي مؤقتًا عند تحريك الماوس فوق شريط التمرير
الرسوم المتحركة	500	int	!!! يعمل هذا الخيار إذا كان المستعرض لا يدعم css3. إذا كان المستعرض يدعم css3 ، فيجب تغيير هذه المعلمة في ملف .css !!!
السهام	صحيح	منطقي / سلسلة	إظهار / إخفاء / إرفاق الأسهم. صحيح لعرض الأسهم في حاوية شريط التمرير. خطأ للاختباء. يمكنك أيضًا تحديد اسم الفئة (على سبيل المثال: ".class-name") لإرفاق كود html خاص
الأسهم	سهام المنزلق	سلسلة	الفئة التي سيتم تخصيصها للحاوية ذات الأسهم
السهم الرئيسي	السهم المنزلق	سلسلة	فئة رئيسية لجميع الأسهم
arrowRightClass	المنزلق السهم لليمين	سلسلة	فئة للسهم الأيمن
السهم إلى اليسار	المنزلق السهم اليسار	سلسلة	فئة للسهم الأيسر
السهم الأيمن	التالي	سلسلة	نص السهم الأيمن
السهم الأيسر	السابق	سلسلة	نص للسهم الأيسر
التنقل	صحيح	منطقي / سلسلة	إظهار / إخفاء / إرفاق التنقل بالشرائح. صحيح للعرض. خطأ للاختباء
navCenter	صحيح	منطقي	مركز الملاحة
navClass	المنزلق التنقل	سلسلة	فئة لحاوية الملاحة
navItemClass	شريط التمرير nav_item	سلسلة	فئة لعنصر التنقل
navCurrentItemClass	شريط التمرير nav__item - الحالي	سلسلة	فئة لعنصر التنقل الحالي
لوحة المفاتيح	صحيح	منطقي	قم بالتمرير على الشريحة بالضغط على الزرين الأيسر / الأيمن
المسافة	60	كثافة العمليات / منطقي	دعم اللمس (اللمس). خطأ لتعطيل هذه الميزة.
قبل	وظيفة()()	وظيفة	رد الاتصال الذي سيتم تشغيله قبل تهيئة البرنامج المساعد
afterInit	وظيفة()()	وظيفة	رد الاتصال الذي سيتم تشغيله بعد تهيئة البرنامج المساعد
قبل الانتقال	وظيفة()()	وظيفة	رد الاتصال الذي سيتم تشغيله قبل التمرير في شريط التمرير
بعد الانتقال	وظيفة()()	وظيفة	رد الاتصال الذي سيتم تشغيله بعد تمرير شريط التمرير

API

لاستخدام API ، اكتب الانزلاق إلى متغير.

var glide = $ (". slider"). glide (). data ("api_glide") ؛

طرق API متاحة لك الآن.

Glide.jump (3، console.log ("Wooo!")) ؛

• .current () - إرجاع رقم الجانب الحالي
• .play () - ابدأ التمرير التلقائي
• .pause () - لإيقاف التمرير التلقائي
• .next (رد الاتصال) - قم بتمرير شريط التمرير للأمام
• .prev (رد الاتصال) - قم بتمرير شريط التمرير للخلف
• .jump (المسافة ، رد الاتصال) - للانتقال إلى شريحة معينة
• .nav (الهدف) - إرفاق التنقل بعنصر معين (مثل: "body"، ".class"، "#id")
• .arrows (الهدف) - إرفاق الأسهم بعنصر معين (على سبيل المثال: "body"، ".class"، "#id")