كيفية جعل شريط التمرير في جس: تعليمات خطوة بخطوة مع أمثلة

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

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

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

1. التحضير لإنشاء شريط التمرير في شبيبة
2. اختيار وربط مكتبة للعمل مع شريط التمرير
3. إنشاء هيكل هتمل من المنزلق
4. تحديد أنماط شريط التمرير
5. كتابة برنامج نصي لشريط التمرير إلى وظيفة
6. إضافة الرسوم المتحركة إلى شريط التمرير
7. اختبار وتحسين شريط التمرير
8. سؤال وجواب
9. كيف يمكنني إنشاء شريط التمرير في جافا سكريبت?
10. كيف يمكنني إضافة الصور إلى شريط التمرير?
11. كيف يمكنني تعيين أنماط لشريط التمرير?
12. كيف يمكنني جعل التبديل التلقائي الشريحة?
13. هل من الممكن إضافة الرسوم المتحركة عند تبديل الشرائح?
14. هل من الممكن لجعل شريط التمرير مع القدرة على سحب وإسقاط?

التحضير لإنشاء شريط التمرير في شبيبة

لإنشاء شريط تمرير في جافا سكريبت ، تحتاج إلى اتباع عدة خطوات.

1. إنشاء عناصر هتمل اللازمة.
2. كتابة أنماط كس لشريط التمرير.
3. إضافة وظائف جافا سكريبت والأحداث اللازمة.

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

الخطوة التالية هي كتابة أنماط كس لشريط التمرير. تحدد الأنماط مظهر شريط التمرير وأبعاده والرسوم المتحركة والمكونات الأخرى.

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

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

اختيار وربط مكتبة للعمل مع شريط التمرير

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

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

للاتصال مسج ، تحتاج إلى تحميل البرنامج النصي المكتبة من الموقع الرسمي أو استخدام خادم كندي.

مثال على توصيل مسج عبر كندي:

• في مستند هتمل الخاص بك:

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

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

مثال على توصيل البقعة عبر كندي:

• وثيقة أتش تي أم أل الخاصة بك:

• في مستند هتمل الخاص بك:

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

مثال على ربط البومة دائري عبر كندي:

• وثيقة أتش تي أم أل الخاصة بك:

• في مستند هتمل الخاص بك:

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

إنشاء هيكل هتمل من المنزلق

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

يمكن تنظيم الهيكل الأساسي لشريط التمرير باستخدام العناصر التالية:

1. حاوية المنزلق:

   • العنصر الذي سيحتوي على شريط التمرير بأكمله.

2. الشرائح:

   • العناصر التي تمثل الشرائح الفردية في شريط التمرير.

3. المؤشرات:

   • العناصر التي ستعرض الشريحة النشطة حاليا أو تقفز إلى شريحة معينة.

4. أزرار التحكم:

   • العناصر التي تسمح للمستخدم بتبديل الشرائح ذهابا وإيابا.

مثال على هيكل هتمل من المنزلق:

التالي

تحتوي بنية شريط التمرير هذه على حاوية بها فئة "شريط التمرير" ، توجد بداخلها عناصر مع فئة " الشرائح — - وهي كتل بها شرائح فردية باستخدام علامة

. يتم تمثيل كل شريحة داخل العنصر الخاص بها مع فئة" الشريحة " ، في هذا المثال كصورة باستخدام .

يتم تمثيل مؤشرات المنزلق بقائمة مع فئة "المؤشرات" ، حيث كل عنصر قائمة (علامة

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

فيما يلي الأنماط الرئيسية التي يمكن تطبيقها على شريط التمرير:

العرض والارتفاع: حدد أبعاد الشريحة أو حاوية المنزلق باستخدام الخصائص

العرض

و

الارتفاع

• }

تحديد المواقع: استخدم العقار

المنصب

لتعيين موضع شريط التمرير. على سبيل المثال:

.المنزلق {

موضع: نسبي;

/ * أو */

موضع: مطلق;

}

الهوامش: إضافة هوامش بين الشرائح أو عناصر شريط التمرير باستخدام الخاصية

الهامش

. على سبيل المثال:

.الشريحة {

الهامش الأيمن: 10 بكسل;

/ * أو */

1. الهامش السفلي: 20 بكسل;

}

2. معلومات أساسية: قم بتعيين صورة الخلفية أو اللون لحاوية الشريحة أو شريط التمرير باستخدام الخاصية

صورة الخلفية

أو

3. لون الخلفية

. على سبيل المثال:

4. .الشريحة {

الخلفية صورة: رابط ('الانزلاق 1.جي بي جي);

/ * أو */

لون الخلفية: # اف 5 اف 5 اف 5;

}

الرسوم المتحركة: إضافة الرسوم المتحركة للانتقال بين الشرائح باستخدام الخصائص

الانتقال

و

الرسوم المتحركة

. على سبيل المثال:

.المنزلق {

الانتقال: تحويل 0.5 ثانية سهولة في الخروج;

/ * أو */

الرسوم المتحركة: الشريحة 5 ثانية اللانهائي;

}

@إطارات مفتاحية الشريحة {

0 ٪ {تحويل: ترانسلاتكس (0)؛}

100 ٪ {تحويل: ترانسلاتكس (-100٪)؛}

}

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

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

كتابة برنامج نصي لشريط التمرير إلى وظيفة

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

في ما يلي تعليمات خطوة بخطوة لكتابة برنامج نصي حتى يعمل شريط التمرير:

إنشاء المتغيرات والحصول على روابط لعناصر دوم الضرورية.

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

تعيين القيم الأولية وتعيين معالجات الأحداث.

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

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

كتابة وظائف لنقل الشرائح.

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

استدعاء وظائف لنقل الشرائح عندما يتم تشغيل الأحداث.

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

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

إضافة الرسوم المتحركة إلى شريط التمرير

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

إذا كنت ترغب في استخدام كس لإضافة الرسوم المتحركة ، وسوف تحتاج إلى إنشاء فئات نمط منفصلة لكل تأثير الرسوم المتحركة. على سبيل المثال ، يمكنك إنشاء فئات "الشريحة في اليسار" ، "الشريحة في اليمين" ، "تتلاشى في" ، الخ., чтобы задать различные анимации для отображения слайдов.

Ss المغلق-кода для добавления анимации при смене слайдов:

.المنزلق {

موضع: نسبي;

العرض: 100%;

تجاوز: مخفي;

}

.الشريحة {

موضع: مطلق;

أعلى: 0;

اليسار: 0;

العرض: 100%;

الارتفاع: 100%;

1. الانتقال: تحويل 0.5 ثانية سهولة في الخروج;
2. }
3. .الشريحة في اليسار {
4. تحويل: ترانسلاتكس (100٪);

}

• .الشريحة في اليمين {
• تحويل: ترانسلاتكس (-100٪);
• }
• .تتلاشى في {

التعتيم: 0;

الانتقال: التعتيم 0.5 ثانية سهولة في الخروج;

}

.المنزلق.نشط .الشريحة {

تحويل: ترانسلاتكس (0);

}

.المنزلق.نشط .تتلاشى في {

التعتيم: 1;

}

لاستخدام الرسوم المتحركة ، يمكنك إضافة أو إزالة الفئة "النشطة" من عنصر شريط التمرير عند تبديل الشرائح.

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

مثال على استخدام مسج لإضافة الرسوم المتحركة عند تغيير الشرائح:

document (وثيقة).جاهز (وظيفة () {

$('.المنزلق .الشريحة').تشغيل ('انقر' ، وظيفة () {