شريط التمرير مع النقر للتكبير. SlidesJS، البرنامج المساعد jQuery سريع الاستجابة
الوقت لا يقف ساكنا ومعه يتقدم. وقد أثر هذا أيضًا على الإنترنت. يمكنك أن ترى بالفعل كيف يتغير مظهرالمواقع، تحظى بشعبية خاصة تصميم التكيف. وفي هذا الصدد، ظهر عدد لا بأس به من أشرطة تمرير jquery التكيفية أو المعارض أو الرف الدائري أو المكونات الإضافية المماثلة.
1. منزلق المشاركات الأفقية المستجيبة
دائري أفقي متكيف مع تعليمات التثبيت التفصيلية. تم الانتهاء منه في أسلوب بسيط، ولكن يمكنك تصميمه بما يناسبك.
2. شريط التمرير على Glide.js
هذا المنزلق مناسب لأي موقع ويب. ويستخدم Glide.js مع مفتوح المصدر. يمكن تغيير ألوان شريط التمرير بسهولة.
3. عرض شرائح المحتوى المائل
شريط تمرير المحتوى سريع الاستجابة. أهم ما يميز شريط التمرير هذا هو التأثير ثلاثي الأبعاد للصور، بالإضافة إلى الرسوم المتحركة المختلفة ذات المظهر العشوائي.
4. شريط التمرير باستخدام قماش HTML5
شريط تمرير جميل جدًا ومثير للإعجاب يحتوي على جزيئات تفاعلية. تم إنشاؤه باستخدام قماش HTML5،
5. صورة تحوير المنزلق
شريط تمرير ذو تأثير متحول (تحويل سلس من كائن إلى آخر). في في هذا المثاليعتبر شريط التمرير مناسبًا تمامًا لمحفظة مطور الويب أو استوديو الويب في شكل محفظة.
6. شريط التمرير الدائري
سلايدر على شكل دائرة مع تأثير قلب الصورة.
7. شريط تمرير بخلفية غير واضحة
شريط تمرير متكيف مع التبديل وطمس الخلفية.
8. منزلق الموضة المستجيب
شريط تمرير موقع ويب بسيط وخفيف الوزن وسريع الاستجابة.
9. Slicebox - شريط تمرير الصور ثلاثي الأبعاد jQuery (محدث)
نسخة محدثة من شريط التمرير Slicebox مع إصلاحات وميزات جديدة.
10. شبكة الصور المتحركة المستجيبة المجانية
البرنامج المساعد JQuery لإنشاء شبكة صور مرنة من شأنها تبديل اللقطات باستخدام الرسوم المتحركة المختلفةوالتوقيت. قد يبدو هذا جيدًا كخلفية أو عنصر زخرفيعلى الموقع، حيث يمكننا تكوين المظهر الانتقائي للصور الجديدة وانتقالاتها. البرنامج المساعد يأتي في عدة إصدارات.
11. فليكس المنزلق
عالمي البرنامج المساعد المجانيلموقع الويب الخاص بك. يأتي هذا البرنامج المساعد في العديد من خيارات شريط التمرير والعرض الدائري.
12. إطار الصورة
Fotorama هو مكون إضافي عالمي. يحتوي على العديد من الإعدادات، وكل شيء يعمل بسرعة وسهولة، ويمكنك عرض الشرائح في وضع ملء الشاشة. يمكن استخدام شريط التمرير بحجم ثابت وقابل للتكيف، مع أو بدون صور مصغرة، مع أو بدون تمرير دائري، وغير ذلك الكثير.
ملاحظة. لقد قمت بتثبيت شريط التمرير عدة مرات وأعتقد أنه واحد من الأفضل
13. معرض منزلق ثلاثي الأبعاد مجاني وقابل للتكيف مع صور مصغرة.
معرض شريط التمرير التجريبي 3DPanelLayout مع شبكة وتأثيرات رسوم متحركة مثيرة للاهتمام.
14. شريط التمرير على CSS3
تم إنشاء شريط التمرير التكيفي باستخدام CSS3 مع المظهر السلس للمحتوى والرسوم المتحركة الخفيفة.
15. واو سلايدر
WOW Slider عبارة عن شريط تمرير للصور ذو تأثيرات بصرية مذهلة.
17. مطاطا
شريط تمرير مرن مع استجابة كاملة وصور مصغرة للشرائح.
18. الشق
هذا شريط تمرير سريع الاستجابة بملء الشاشة باستخدام رسوم CSS3 المتحركة. يتكون شريط التمرير في نسختين. يتم تنفيذ الرسوم المتحركة بشكل غير عادي وجميل.
19. معرض الصور التكيفي بلس
بسيط منزلق مجاني-معرض مع تحميل الصور.
20. شريط التمرير المستجيب لـ WordPress
شريط التمرير الحر التكيفي لـ WP.
21. منزلق محتوى المنظر
شريط التمرير مع تأثير المنظر والتحكم في كل عنصر باستخدام CSS3.
22. شريط التمرير مع وصلة الموسيقى
شريط التمرير باستخدام كود JPlayer مفتوح المصدر. يشبه شريط التمرير هذا عرضًا تقديميًا مع الموسيقى.
23. شريط التمرير مع jmpress.js
يعتمد شريط التمرير سريع الاستجابة على jmpress.js وبالتالي سيسمح لك بإضافة بعض التأثيرات ثلاثية الأبعاد المثيرة للاهتمام إلى شرائحك.
24. عرض شرائح التحويم السريع
عرض الشرائح مع التبديل السريعالشرائح. تبديل الشرائح عند التمرير.
25. صورة الأكورديون مع CSS3
صورة الأكورديون باستخدام CSS3.
26. البرنامج المساعد للمعرض المحسن باللمس
هذا معرض سريع الاستجابةوهو الأمثل للأجهزة التي تعمل باللمس.
27. معرض ثلاثي الأبعاد
معرض حائط ثلاثي الأبعاد - تم إنشاؤه من أجل متصفح سفاريحيث سيكون التأثير ثلاثي الأبعاد مرئيًا. إذا نظرت إليه في متصفح آخر، فستكون الوظيفة جيدة ولكن التأثير ثلاثي الأبعاد لن يكون مرئيًا.
28. شريط التمرير مع ترقيم الصفحات
شريط تمرير سريع الاستجابة مع ترقيم الصفحات باستخدام شريط تمرير JQuery UI. والفكرة هي استخدام مفهوم التنقل البسيط. من الممكن إرجاع جميع الصور أو التبديل بين الشرائح.
29. مونتاج الصور باستخدام jQuery
ترتيب الصور تلقائيًا حسب عرض الشاشة. شيء مفيد جدًا عند تطوير موقع ويب للمحفظة.
30. معرض ثلاثي الأبعاد
شريط تمرير دائري ثلاثي الأبعاد بسيط باستخدام CSS3 وJQuery.
31. وضع ملء الشاشةمع تأثير ثلاثي الأبعاد باستخدام css3 و jQuery
شريط تمرير مع إمكانية عرض الصور بملء الشاشة مع انتقال جميل.
1. عرض شرائح jQuery ممتازعرض شرائح كبير ومذهل مع باستخدام مسجالتقنيات.
2. البرنامج المساعد jQuery "Scale Carousel"
عرض شرائح قابل للتطوير باستخدام jQuery. يمكنك ضبط أحجام عرض الشرائح التي تناسبك.
3. البرنامج المساعد مسج "slideJS"
شريط تمرير الصورة مع وصف النص.
4. البرنامج المساعد "JSliderNews"
عندما تقوم بالتمرير فوق أسهم التنقل، تظهر صورة مصغرة دائرية للشريحة التالية.
6. منزلق "دورة العرض التقديمي" الجميل لـ jQuery
شريط تمرير jQuery مع مؤشر تحميل الصور. متاح التغيير التلقائيالشرائح.
7. البرنامج المساعد مسج "Parallax Slider"
شريط التمرير مع تأثير الخلفية الحجمي. أهم ما يميز شريط التمرير هذا هو حركة الخلفية، التي تتكون من عدة طبقات، يتم تمرير كل منها بسرعة مختلفة. والنتيجة هي تقليد التأثير الحجمي. يبدو جميلا جدا، يمكنك أن ترى بنفسك. يتم عرض التأثير بشكل أكثر سلاسة في المتصفحات مثل Opera، جوجل كروم،أي.
8. شريط تمرير jQuery جديد وخفيف الوزن "bxSlider 3.0"
في الصفحة التجريبية في قسم "الأمثلة"، يمكنك العثور على روابط للجميع الخيارات الممكنةباستخدام هذا البرنامج المساعد.
9. منزلق صورة jQuery، البرنامج المساعد "slideJS".
من المؤكد أن شريط تمرير jQuery الأنيق يمكنه تزيين مشروعك.
10. البرنامج المساعد لعرض الشرائح jQuery "Easy Slides" v1.1
أداة مساعدة jQuery سهلة الاستخدام لإنشاء عروض الشرائح.
11. البرنامج المساعد مسج سليدي
البرنامج المساعد jQuery خفيف الوزن في إصدارات مختلفة. يتم توفير التغيير التلقائي للشرائح.
12. مسج CSSمعرض مع تغيير الشرائح التلقائي
إذا لم يقم الزائر بالنقر فوق أسهم "للأمام" أو "للخلف" خلال فترة زمنية معينة، فسيبدأ المعرض في التمرير تلقائيًا.
13. شريط تمرير jQuery "Nivo Slider"
مكون إضافي خفيف الوزن احترافي للغاية وذو جودة عالية رمز صالح. هناك العديد من تأثيرات انتقال الشرائح المختلفة المتاحة.
14. شريط تمرير jQuery "MobilySlider"
سلايدر طازج. شريط تمرير jQuery مع تأثيرات مختلفة لتغيير الصورة.
15. البرنامج المساعد مسج "Slider²"
منزلق خفيف الوزن مع مبدل الشرائح التلقائي.
16. منزلق جافا سكريبت الجديد
شريط التمرير مع التغيير التلقائي للصورة.
البرنامج المساعد لتنفيذ عروض الشرائح مع تغيير الشرائح تلقائيا. من الممكن التحكم في العرض باستخدام الصور المصغرة للصور.
مسج شريط تمرير CSSالصور باستخدام البرنامج المساعد NivoSlider.
19. شريط تمرير jQuery "jShowOff"
البرنامج المساعد لتدوير المحتوى. ثلاثة خيارات للاستخدام: بدون التنقل (مع التغيير التلقائي في تنسيق عرض الشرائح)، مع التنقل على شكل أزرار، مع التنقل على شكل صور مصغرة.
20. البرنامج المساعد لمحفظة تأثير المصراع
ملحق jQuery جديد لتصميم محفظة المصور. المعرض له تأثير مثير للاهتمام لتغيير الصور. الصور تتبع بعضها البعض بتأثير مماثل لعملية غالق العدسة.
21. الضوء جافا سكريبت المغلقشريط التمرير "TinySlider 2"
تنفيذ شريط تمرير الصورة باستخدام جافا سكريبت وCSS.
22. شريط تمرير رائع "Tinycircleslider"
منزلق دائري أنيق. يتم الانتقال بين الصور عن طريق سحب شريط التمرير على شكل دائرة حمراء حول المحيط. سوف يتناسب تمامًا مع موقع الويب الخاص بك إذا كنت تستخدم عناصر مستديرة في تصميمك.
23. شريط تمرير الصور باستخدام jQuery
منزلق خفيف الوزن "Slider Kit". يتوفر شريط التمرير بتصميمات مختلفة: عمودي وأفقي. نفذت أيضا أنواع مختلفةالتنقل بين الصور: باستخدام زري "الأمام" و"الخلف"، باستخدام عجلة الماوس، باستخدام النقر بالماوس على الشريحة.
24. معرض المنمنمات "Slider Kit"
معرض "مجموعة التمرير". يتم تمرير الصور المصغرة عموديًا وأفقيًا. يتم الانتقال بين الصور باستخدام: عجلة الماوس أو النقر بالماوس أو تحريك المؤشر فوق الصورة المصغرة.
25. منزلق محتوى jQuery "Slider Kit"
شريط تمرير المحتوى الرأسي والأفقي باستخدام jQuery.
26. عرض شرائح jQuery "Slider Kit"
عرض الشرائح مع تغيير الشرائح تلقائيًا.
27. الضوء جافا سكريبت المهنيةشريط التمرير CSS3
تم إنشاء شريط تمرير jQuery وCSS3 أنيق في عام 2011.
عرض شرائح jQuery مع الصور المصغرة.
29. عرض شرائح مسج بسيط
عرض الشرائح مع أزرار التنقل.
30. رائع عرض شرائح مسج"سكيتر"
البرنامج المساعد jQuery Skitter لإنشاء عروض شرائح مذهلة. يدعم البرنامج المساعد 22 (!) نوعًا من تأثيرات الرسوم المتحركة المختلفة عند تغيير الصور. يمكن العمل مع خيارين للتنقل بين الشرائح: استخدام أرقام الشرائح واستخدام الصور المصغرة. تأكد من مشاهدة العرض التوضيحي، وهو اكتشاف عالي الجودة. التقنيات المستخدمة: CSS، HTML، jQuery، PHP.
31. عرض الشرائح "محرج"
عرض الشرائح الوظيفية. يمكن أن تكون الشرائح: صور بسيطةوالصور مع التسميات التوضيحية والصور مع تلميحات الأدوات ومقاطع الفيديو. يمكنك استخدام الأسهم وروابط أرقام الشرائح ومفاتيح اليسار/اليمين على لوحة المفاتيح للتنقل. يأتي عرض الشرائح في عدة إصدارات: مع وبدون صور مصغرة. لعرض جميع الخيارات، اتبع الروابط العرض التوضيحي رقم 1 - العرض التوضيحي رقم 6 الموجود أعلى صفحة العرض التوضيحي.
تصميم أصلي للغاية لشريط تمرير الصورة، يذكرنا بالمروحة. انتقال الشريحة المتحركة. يتم التنقل بين الصور باستخدام الأسهم. يوجد أيضًا تحول تلقائي يمكن تشغيله وإيقاف تشغيله باستخدام زر التشغيل / الإيقاف المؤقت الموجود في الأعلى.
شريط تمرير jQuery متحرك. صور الخلفيةيتم تغيير الحجم تلقائيًا عند تغيير حجم نافذة المتصفح. لكل صورة، تظهر كتلة مع الوصف.
34. شريط التمرير "Flux Slider" باستخدام jQuery وCSS3
شريط تمرير jQuery جديد. العديد من التأثيرات المتحركة الرائعة عند تغيير الشرائح.
35. البرنامج المساعد مسج "jSwitch"
معرض مسج الرسوم المتحركة.
عرض شرائح jQuery سهل مع تغيير الشرائح تلقائيًا.
37. نسخة جديدةالبرنامج المساعد "SlideDeck 1.2.2"
شريط تمرير المحتوى الاحترافي. هناك خيارات مع تغيير الشرائح تلقائيًا، بالإضافة إلى خيار استخدام عجلة الماوس للتنقل بين الشرائح.
38. شريط تمرير jQuery "Sudo Slider"
منزلق صور خفيف الوزن باستخدام jQuery. هناك الكثير من خيارات التنفيذ: التغيير الأفقي والرأسي للصور، مع وبدون روابط لرقم الشريحة، مع تسميات توضيحية للصور وبدونها، تأثيرات مختلفةتغيير الصور. هناك وظيفة تغيير الشريحة التلقائية. يمكن العثور على روابط لجميع أمثلة التنفيذ على الصفحة التجريبية.
39. عرض الشرائح jQuery CSS3
عرض الشرائح مع الصور المصغرة يدعم وضع تغيير الشرائح التلقائي.
40. شريط تمرير jQuery "Flux Slider"
شريط التمرير مع العديد من تأثيرات تغيير الصورة.
41. مسج بسيطالمنزلق
منزلق صور أنيق باستخدام jQuery.
42. عرض شرائح jQuery "Craftyslide".
عرض شرائح jQuery HTML5 يمتد عبر عرض الشاشة بالكامل مع الصوت.
عرض شرائح مسج بسيط.
سأبدأ بحقيقة ذلك هذا المقالتمت كتابته للحديث عن كيفية إنشاء شريط تمرير للصور لصفحات الويب. هذه المقالة ليست تعليمية بطبيعتها بأي حال من الأحوال، فهي مجرد مثال لكيفية تنفيذ موضوعنا الذي نتناوله. يمكنك استخدام الكود الموجود في هذه المقالة كنوع من القالب لتطورات مماثلة، وآمل أن أتمكن من أن أنقل للقارئ جوهر ما كتبته بتفاصيل كافية وبطريقة يسهل الوصول إليها.
والآن، منذ وقت ليس ببعيد، كنت بحاجة إلى تثبيت شريط تمرير على موقع واحد، ولكن بعد البحث في الإنترنت عن البرامج النصية الجاهزة، لم أجد أي شيء مفيد، لأنه لم يعمل البعض كما أحتاج، والبعض الآخر لم يبدأ على الإطلاق دون أخطاء في وحدة التحكم. بدا لي أنه من غير المثير للاهتمام استخدام المكونات الإضافية لـ jQuery لشريط التمرير، لأن... على الرغم من أن هذا سيحل المشكلة، إلا أنني لن أفهم كيفية عمل هذه الآلية، كما أن استخدام مكون إضافي لشريط تمرير واحد فقط ليس مثاليًا. كما أنني لم أشعر حقًا برغبة في فهم النصوص البرمجية الملتوية، لذلك قررت أن أكتب نصًا خاصًا بي لشريط التمرير، والذي سأقوم بترميزه بنفسي حسب الحاجة.
أولاً، نحتاج إلى اتخاذ قرار بشأن منطق شريط التمرير نفسه، ثم المضي قدمًا في التنفيذ. في هذه المرحلة، يعد الفهم الواضح لعمل هذه الآلية أمرًا مهمًا للغاية، لأنه بدونها لا يمكننا كتابة التعليمات البرمجية التي تعمل بالطريقة التي نعمل بها تمامًا. يريد.
سيكون هدفنا الرئيسي هو إطار العرض، أي الكتلة التي سنرى فيها كيف تدور صورنا، حيث سيكون لدينا غلاف شرائح، وستكون هذه هي الكتلة التي تحتوي على جميع الصور المصفوفة في سطر واحد، والتي ستتغير موقعه داخل إطار العرض نفسه. 
بعد ذلك، على الجوانب داخل إطار العرض، عموديًا في المنتصف، سيكون هناك أزرار للخلف وللأمام، عند النقر عليها، سنقوم أيضًا بتغيير موضع غلاف الشرائح الخاص بنا بالنسبة إلى إطار العرض، مما يؤدي إلى تأثير التمرير عبر الصور. وأخيرًا، سيكون العنصر الأخير هو أزرار التنقل الموجودة أسفل إطار العرض. 
عندما نضغط عليها، سننظر ببساطة إلى الرقم التسلسلي لهذا الزر وننقله إلى الشريحة التي نحتاجها، مرة أخرى عن طريق تحريك غلاف الشريحة (سيتم التغيير عن طريق تغيير خاصية تحويل css، والتي ستكون قيمتها محسوبة باستمرار).
أعتقد أن منطق كيفية عمل هذا الأمر برمته يجب أن يكون واضحًا بعد ما ذكرته أعلاه، ولكن إذا استمر سوء الفهم في مكان ما، فسيصبح كل شيء أكثر وضوحًا في الكود أدناه، فأنت تحتاج فقط إلى القليل من الصبر.
الآن دعونا نكتب! أولًا، لنفتح ملف الفهرس الخاص بنا ونكتب الترميز الذي نحتاجه هناك:
كما ترون، لا يوجد شيء معقد، فالكتلة مقابل شريط التمرير بمثابة الكتلة التي سيتم وضع شريط التمرير الخاص بنا بداخلها، بداخلها يوجد منفذ العرض نفسه، حيث يوجد غلاف الشرائح الخاص بنا، وهي أيضًا قائمة متداخلة، هنا الشرائح و img عبارة عن صور بداخلها. يرجى الانتباه إلى حقيقة أن جميع الصور يجب أن تكون بنفس الحجم أو على الأقل النسب، وإلا سيبدو شريط التمرير ملتويًا، لأن أبعادها تعتمد بشكل مباشر على نسب الصورة.
الآن نحن بحاجة إلى أسلوب هذا الأمر برمته؛ عادة لا يتم التعليق على الأنماط بشكل خاص، لكنني قررت أن ألفت الانتباه إلى هذا حتى لا يكون هناك أي سوء فهم في المستقبل.
الجسم ( الهامش: 0؛ الحشو: 0؛) #كتلة لشريط التمرير (العرض: 800 بكسل؛ الهامش: 0 تلقائي؛ الهامش العلوي: 100 بكسل؛) #منفذ العرض (العرض: 100%؛ العرض: الجدول؛ الموضع: نسبي؛) تجاوز: مخفي؛ -webkit-user-select: لا شيء؛ -o-user-select: لا شيء؛ العرض: 100٪ * 4؛ -webkit-transition : 1 ثانية؛ - وظيفة توقيت الانتقال: سهولة الدخول والخروج؛ - وظيفة توقيت الانتقال: سهولة الدخول والخروج؛ ( الهامش : 0; الحشو: 0; ) #slidewrapper li ( width: calc(100%/4); نمط القائمة: لا شيء; العرض: مضمن; تعويم: يسار; ) .slide-img ( width: 100%; )
لنبدأ بالكتلة مقابل شريط التمرير، مرة أخرى، هذه هي الكتلة الخاصة بنا على الصفحة، والتي سنخصصها لشريط التمرير، وسيعتمد ارتفاعها على عرضها وعلى نسب صورتنا، لأن يحتل منفذ العرض العرض الكامل للكتلة المنزلقة ، ثم يكون للشريحة نفسها نفس العرض، وبالتالي فإن الصورة الموجودة بداخلها تغير ارتفاعها اعتمادًا على العرض (يتم الحفاظ على النسب). لقد وضعت هذا العنصر على صفحتي أفقيًا في المنتصف، مع مسافة بادئة قدرها 100 بكسل من الأعلى، مما يجعل موضعه أكثر ملاءمة للمثال.
يحتل عنصر إطار العرض، كما ذكرنا سابقًا، العرض الكامل لشريط التمرير الخاص بنا، وله خاصية التجاوز: مخفي، وهذا سيسمح لنا بإخفاء خلاصة الصور الخاصة بنا، والتي تمتد إلى ما وراء إطار العرض. 
خاصية CSS التالية هي user-select:none، والتي تسمح لك بالتخلص من التمييز الأزرق العناصر الفرديةشريط التمرير مع العديد من النقرات على الأزرار.
بالانتقال إلى غلاف الشرائح، لماذا الموضع: نسبي وليس مطلقًا؟ كل شيء بسيط للغاية، لأنه... إذا اخترنا الخيار الثاني، فعند تجاوز سعة إطار العرض: الخاصية المخفية، لن يظهر لنا أي شيء على الإطلاق، لأنه لن يتكيف منفذ العرض نفسه مع ارتفاع غلاف الشريحة، ولهذا السبب سيكون له height:0 . لماذا يهم العرض ولماذا نضبطه على الإطلاق؟ النقطة المهمة هي أن شرائحنا سيكون عرضها مساويًا لـ 100% من إطار العرض، ومن أجل ترتيبها نحتاج إلى مكان ستقف فيه، لذلك يجب أن يكون عرض غلاف الشرائح مساويًا لـ 100% من عرض إطار العرض مضروبًا في عدد الشرائح (في حالتي، 4). أما بالنسبة للانتقال ووظيفة توقيت الانتقال، فهنا 1 تعني أن التغيير في موضع غلاف الشريحة سيحدث خلال ثانية واحدة وسنلاحظه، كما أن سهولة الدخول إلى الخارج هي نوع من الرسوم المتحركة يتم فيها التحرك ببطء أولاً ثم يتسارع حتى المنتصف، ثم يتباطأ مرة أخرى، وهنا يمكنك ضبط القيم حسب تقديرك.
تقوم المجموعة التالية من الخصائص بتعيين غلاف الشرائح وأبناءها بحيث لا تحتوي على أي حشوة، ولا حاجة للتعليقات هنا.
بعد ذلك، نقوم بتصميم شرائحنا، ويجب أن يكون عرضها مساويًا لعرض إطار العرض، ولكن بما أن... فهي موجودة في غلاف شرائح عرضه يساوي عرض إطار العرض مضروبًا في عدد الشرائح، ثم للحصول على عرض إطار العرض مرة أخرى، نحتاج إلى تقسيم 100% من عرض غلاف الشرائح على عدد الشرائح (في حالتي، مرة أخرى، بواسطة 4). ثم نحولهم إلى العناصر المضمنةباستخدام العرض: مضمن وقم بتعيين العنصر العائم إلى اليسار عن طريق إضافة الخاصية float:left. حول list-style:none أستطيع أن أقول إنني أستخدمه لإزالة العلامة الافتراضية من li، وهو في معظم الحالات نوع من المعايير.
باستخدام Slide-img، يكون كل شيء بسيطًا، حيث ستشغل الصورة عرض الشريحة بالكامل، وسيتم ضبط الشريحة وفقًا لارتفاعها، وسيتكيف غلاف الشريحة مع ارتفاع الشريحة، وسيأخذ ارتفاع إطار العرض بدوره قيمة الارتفاع من Slidewrapper، وبالتالي فإن ارتفاع شريط التمرير لدينا سيعتمد على نسب الصورة وحجم الكتلة، المقدمة لشريط التمرير، والتي كتبت عنها بالفعل أعلاه.
أعتقد أننا في هذه المرحلة قد اكتشفنا الأنماط، فلنقم بإنشاء عرض شرائح بسيط بدون أزرار في الوقت الحالي، وبعد أن نتأكد من أنه يعمل بشكل صحيح، سنضيفها ونصممها.
لنفتح ملف js الخاص بنا، والذي سيحتوي على رمز شريط التمرير، ولا تنس توصيل jQuery، لأنه سنكتب باستخدام هذا الإطار. بالمناسبة، في وقت كتابة هذا المقال، كنت أستخدم الإصدار 3.1.0 من jQuery. يجب تضمين الملف الذي يحتوي على البرنامج النصي نفسه في نهاية علامة النص، لأنه سنعمل مع عناصر DOM التي تحتاج إلى التهيئة أولاً.
نحتاج الآن إلى الإعلان عن متغيرين، أحدهما سيخزن رقم الشريحة التي نراها لحظة معينةالوقت في إطار العرض، أسميته SlideNow، والثاني سيخزن عدد هذه الشرائح نفسها، وهذا هو SlideCount.
فار سلايد ناو = 1; var SlideCount = $("#slidewrapper").children().length);
يجب تعيين المتغير SlideNow على قيمة أولية قدرها 1 لأن عند تحميل الصفحة، بناءً على ترميزنا، سنرى الشريحة الأولى في إطار العرض.
في SlideCount سنضع عدد العناصر الفرعية لـ Slidewrapper، كل شيء منطقي هنا.
بعد ذلك، تحتاج إلى إنشاء وظيفة تكون مسؤولة عن تبديل الشرائح من اليمين إلى اليسار، فلنعلن عنها:
الدالة nextSlide() ()
سنسميها في الجزء الرئيسي من الكود الخاص بنا، والذي سنصل إليه لاحقًا، ولكن في الوقت الحالي سنخبر وظيفتنا بما يجب عليها القيام به:
الدالة nextSlide() ( if (slideNow == SlideCount || SlideNow SlideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); SlideNow = 1; ) else ( ترجمةWidth = -$("#viewport").width() * (slideNow); $("#slidewrapper").css(( "transform": "translate(" + TranslateWidth + "px, 0)", "-webkit- تحويل": "ترجمة(" + ترجمة العرض + "px, 0)"، "-ms-transform": "ترجمة(" + ترجمة العرض + "px, 0)"، ))); SlideNow++; ) )
أولاً، نتحقق مما إذا كنا حاليًا في الشريحة الأخيرة من خلاصتنا؟ للقيام بذلك، نأخذ عدد جميع الشرائح لدينا باستخدام $("#slidewrapper").children().length ونتحقق من ذلك باستخدام رقم الشريحة لدينا، إذا كانت متساوية، فهذا يعني أننا بحاجة إلى البدء في العرض التغذية مرة أخرى، من شريحة واحدة، مما يعني أننا قمنا بتغيير خاصية تحويل CSS الخاصة بمغلف الشرائح إلى ترجمة (0، 0) ، وبالتالي نقلها إلى موضعها الأصلي بحيث تكون الشريحة الأولى في مجال رؤيتنا، ودعونا لا ننسى أيضًا about –webkit و –ms للعرض المناسب عبر المتصفحات (راجع مرجع خصائص .css). بعد ذلك، لا تنس تحديث قيمة المتغير SlideNow، وإخباره أن الشريحة رقم 1 قيد العرض: SlideNow = 1;
يتضمن الشرط نفسه التحقق من أن رقم الشريحة التي نراها يقع ضمن عدد الشرائح لدينا، ولكن إذا لم يتم استيفاء ذلك بطريقة أو بأخرى، فسنعود إلى الشريحة الأولى مرة أخرى.
إذا لم يتم استيفاء الشرط الأول، فهذا يعني أننا لسنا حاليًا على الشريحة الأخيرة ولا على شريحة غير موجودة، مما يعني أننا بحاجة إلى التبديل إلى الشريحة التالية، وسنقوم بذلك عن طريق تحريك غلاف الشريحة إلى اليسار من خلال القيمة المساوية لعرض إطار العرض، سيحدث التحول مرة أخرى من خلال خاصية الترجمة المألوفة، والتي ستكون قيمتها مساوية لـ "translate(" + TranslateWidth + "px, 0)" ، حيث TranslateWidth هي المسافة التي يتم من خلالها تحويل عرض إطار العرض الخاص بنا إلى تم إزاحة غلاف الشريحة. بالمناسبة، دعونا نعلن عن هذا المتغير في بداية الكود:
فار ترجمة العرض = 0;
بعد الانتقال إلى الشريحة التالية، دعنا نقول لشريحتنا الآن أننا نرى الشريحة التالية: SlideNow++;
في هذه المرحلة، قد يتساءل بعض القراء: لماذا لم نستبدل $("#viewport").width() ببعض المتغيرات مثل SlideWidth ليكون عرض الشريحة في متناول اليد دائمًا؟ الجواب بسيط للغاية، إذا كان موقعنا قابلاً للتكيف، وبالتالي فإن الكتلة المخصصة لشريط التمرير تكون أيضًا قابلة للتكيف، وبناءً على ذلك يمكننا أن نفهم أنه عند تغيير حجم عرض النافذة دون إعادة تحميل الصفحة (على سبيل المثال، تشغيل الهاتف جانبها)، سيتغير عرض إطار العرض، وبالتالي، سيتغير عرض شريحة واحدة. في هذه الحالة، سيتم إزاحة غلاف الشرائح الخاص بنا إلى قيمة العرض التي كانت في الأصل، مما يعني أنه سيتم عرض الصور في أجزاء أو لن يتم عرضها على الإطلاق في إطار العرض. من خلال كتابة $("#viewport").width() بدلاً من SlideWidth في وظيفتنا، فإننا نجبرها على حساب عرض إطار العرض في كل مرة نقوم فيها بتبديل الشرائح، وبالتالي نضمن أنه عندما يتغير عرض الشاشة بشكل حاد، سيتم التمرير إلى الشريحة التي نحتاجها.
ومع ذلك، فقد كتبنا دالة، والآن نحتاج إلى استدعائها بعد فترة زمنية معينة، ويمكننا أيضًا تخزين الفاصل الزمني في متغير بحيث إذا أردنا تغييره، يمكننا تغيير قيمة واحدة فقط في الكود:
فار سلايد إنترفال = 2000؛
تتم الإشارة إلى الوقت في js بالمللي ثانية.
الآن دعونا نكتب البناء التالي:
$(document).ready(function () ( setInterval(nextSlide, SlideInterval); ));
لا يمكن أن يكون كل شيء أبسط هنا؛ من خلال بناء $(document).ready(function () ()) نقول ذلك الإجراءات التاليةيجب إجراؤه بعد تحميل المستند بالكامل. بعد ذلك، نقوم ببساطة باستدعاء الدالة nextSlide بفاصل زمني يساوي SlideInterval باستخدام الدالة setInterval المضمنة.
بعد كل الخطوات التي قمنا بها أعلاه، يجب أن يدور شريط التمرير الخاص بنا بشكل مثالي، ولكن إذا حدث خطأ ما، فقد تكون المشكلة إما في إصدار jQuery أو في الاتصال غير الصحيح لأي ملفات. ليست هناك حاجة أيضًا إلى استبعاد احتمال حدوث خطأ في مكان ما في الكود، لذلك لا يمكنني إلا أن أنصحك بالتحقق مرة أخرى من كل شيء. 
في غضون ذلك، دعنا ننتقل ونضيف إلى شريط التمرير الخاص بنا وظيفة مثل إيقاف التمرير عند تحريك المؤشر. للقيام بذلك، نحتاج إلى كتابة الشيء التالي في الكتلة الرئيسية من التعليمات البرمجية (داخل $(document).ready(. هيكل الوظيفة () ()):
$("#viewport").hover(function())( ClearInterval(switchInterval); ),function() ( SwitchInterval = setInterval(nextSlide, SlideInterval); ));
للبدء في تحليل هذا الرمز، نحتاج إلى معرفة ما هو SwitchInterval. أولاً، هذا متغير يخزن الاستدعاء الدوري لوظيفة nextSlide، ببساطة، لدينا هذا السطر من التعليمات البرمجية: setInterval(nextSlide, SlideInterval); ، تم تحويله إلى هذا: SwitchInterval = setInterval(nextSlide, SlideInterval); . بعد هذه التلاعبات، اتخذت المجموعة الرئيسية من التعليمات البرمجية الشكل التالي:
$(document).ready(function () ( var SwitchInterval = setInterval(nextSlide, SlideInterval); $("#viewport").hover(function())( ClearInterval(switchInterval); ),function() ( SwitchInterval = setInterval (الشريحة التالية، الشريحة الفاصلة)؛
هنا أستخدم حدث hover، والذي يعني "عند التمرير"، يتيح لي هذا الحدث تتبع اللحظة التي أقوم فيها بتمرير المؤشر فوق كائن ما، في هذه الحالة إطار العرض.
بعد التمرير، أقوم بمسح الفاصل الزمني الذي أشير إليه بين قوسين (هذا هو SwitchInterval الخاص بنا)، ثم، مفصولاً بفواصل، أكتب ما سأفعله عندما أقوم بتحريك المؤشر للخلف، في هذه الكتلة أقوم مرة أخرى بتعيين SwitchInterval الخاص بنا إلى فترة دورية استدعاء وظيفة nextSlide.
الآن، إذا قمنا بالاختبار، يمكننا أن نرى كيف يتفاعل شريط التمرير مع التمرير، مما يمنع الشريحة من التبديل.
حان الوقت الآن لإضافة أزرار إلى شريط التمرير الخاص بنا، فلنبدأ بالأزرار الأمامية والخلفية.
أولا وقبل كل شيء، دعونا نضع علامة عليها:
في البدايه هذه العلاماتقد يكون الأمر غير واضح، سأقول على الفور أنني قمت بتغليف هذين الزرين في قسم واحد مع فئة prev-next-btns فقط من أجل راحتك، ليس عليك القيام بذلك، والنتيجة لن تتغير، الآن نحن" ستضيف أنماطًا إليها وسيصبح كل شيء واضحًا:
#prev-btn، #next-btn ( الموضع: مطلق؛ العرض: 50 بكسل؛ الارتفاع: 50 بكسل؛ لون الخلفية: #fff؛ نصف قطر الحدود: 50%؛ الأعلى: كالك (50% - 25 بكسل)؛ ) #prev- btn:hover، #next-btn:hover ( المؤشر: المؤشر؛ ) #prev-btn ( اليسار: 20px؛ ) #next-btn ( اليمين: 20px؛ )
أولاً، نضع أزرارنا باستخدام الموضع: المطلق، وبالتالي نتحكم بحرية في موضعها داخل إطار العرض الخاص بنا، ثم سنحدد أحجام هذه الأزرار ونستخدم نصف قطر الحدود لتقريب الزوايا بحيث تتحول هذه الأزرار إلى دوائر. سيكون لونها أبيض، أي #fff، وستكون إزاحتها من الحافة العلوية لإطار العرض مساوية لنصف ارتفاع إطار العرض هذا مطروحًا منه نصف ارتفاع الزر نفسه (في حالتي 25 بكسل)، حتى نتمكن من ذلك ضعهم عموديًا في المركز. بعد ذلك، سنحدد أنه عندما نحرك الماوس فوقها، سيتغير مؤشرنا إلى مؤشر، وأخيرًا سنخبر أزرارنا بشكل فردي أنها يجب أن تكون على بعد 20 بكسل من حوافها حتى نتمكن من رؤيتها بالطريقة التي تناسبنا .
مرة أخرى، يمكنك تصميم عناصر الصفحة بالطريقة التي تريدها، وأنا فقط أعطي مثالاً على الأنماط التي قررت استخدامها.
بعد التصميم، يجب أن يبدو شريط التمرير الخاص بنا كما يلي: 
بعد ذلك، انتقل مرة أخرى إلى ملف js الخاص بنا، حيث سنصف عمل الأزرار لدينا. حسنًا، دعونا نضيف وظيفة أخرى، وسوف تظهر لنا الشريحة السابقة:
الدالة prevSlide() ( if (slideNow == 1 || SlideNow SlideCount) ( TranslateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " تحويل": "ترجمة(" + ترجمة العرض + "px, 0)"، "-webkit-transform": "ترجمة(" + ترجمة العرض + "px, 0)"، "-ms-transform": "ترجمة(" + TranslateWidth + "px, 0)", )); SlideNow = SlideCount ) else ( TranslationWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ( "تحويل": "ترجمة(" + ترجمة العرض + "px, 0)"، "-webkit-transform": "ترجمة(" + ترجمة العرض + "px, 0)"، "-ms-transform": "ترجمة ( " + ترجمة العرض + "px، 0)"، ))); SlideNow--; ) )
يطلق عليه اسم prevSlide ولن يتم استدعاؤه إلا عند النقر فوق prev-btn. أولاً نتحقق مما إذا كنا على الشريحة الأولى أم لا، وهنا نتحقق أيضًا مما إذا كانت شريحة SlideNow الخاصة بنا قد تجاوزت النطاق الفعلي لشرائحنا، وإذا كان أي من الشروط صحيحًا، فسننتقل إلى الشريحة الأخيرة، مع تحريك غلاف الشريحة إلى القيمة التي نحتاجها. سنحسب هذه القيمة باستخدام الصيغة: (عرض الشريحة الواحدة) * (عدد الشرائح - 1)، ونأخذ كل هذا بعلامة الطرح، لأن نحركه إلى اليسار، اتضح أن إطار العرض سيُظهر لنا الآن الشريحة الأخيرة. في نهاية هذه الكتلة، نحتاج أيضًا إلى إخبار متغير SlideNow بأن الشريحة الأخيرة أصبحت الآن في متناول أيدينا.
إذا لم نكن على الشريحة الأولى، فنحن بحاجة إلى العودة 1، ولهذا نقوم مرة أخرى بتغيير خاصية التحويل الخاصة بـ Slidewrapper . الصيغة هي: (عرض الشريحة الواحدة) * (رقم الشريحة الحالية – 2)، مرة أخرى، نأخذ كل هذا بعلامة الطرح. ولكن لماذا -2، وليس -1، هل نحتاج إلى التحرك شريحة واحدة فقط إلى الخلف؟ الحقيقة هي أنه إذا كنا، على سبيل المثال، في الشريحة الثانية، فإن المتغير x لخاصية التحويل:ترجمة(x,0) الخاصة بمغلف الشرائح الخاص بنا يساوي بالفعل عرض شريحة واحدة، إذا أخبرناها أننا بحاجة إلى لطرح 1 من رقم الشريحة الحالية، سنحصل مرة أخرى على واحد، والذي تم من خلاله إزاحة غلاف الشريحة بالفعل، لذلك سنحتاج إلى تحويل عروض إطار العرض نفسها بمقدار 0، وهو ما يعني في SlideNow - 2.
الآن نحتاج فقط إلى إضافة هذه الأسطر إلى الكتلة الرئيسية من التعليمات البرمجية:
$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));
نحن هنا ببساطة نتتبع ما إذا تم النقر على الأزرار الخاصة بنا، وفي هذه الحالة نطلق على الوظائف التي نحتاجها، كل شيء بسيط ومنطقي.
لنقم الآن بإضافة أزرار التنقل بين الشرائح والعودة إلى العلامات مرة أخرى:
كما ترون، ظهرت قائمة متداخلة داخل إطار العرض، فلنعطيها المعرف nav-btns، بداخلها توجد أزرار التنقل الخاصة بنا، وسنخصص لها فئة Slide-nav-btn، ومع ذلك، يمكننا الانتهاء من ذلك العلامات، دعنا ننتقل إلى الأنماط:
#nav-btns ( الموضع: مطلق؛ العرض: 100%؛ الأسفل: 20 بكسل؛ الحشو: 0؛ الهامش: 0؛ محاذاة النص: المركز؛ ) .slide-nav-btn ( الموضع: نسبي؛ العرض: كتلة مضمنة؛ نمط القائمة: لا شيء؛ العرض: 20 بكسل؛ لون الخلفية: #fff؛ الهامش: 3 بكسل؛
نعطي كتلة nav-btns، التي توجد بها أزرارنا، موضع الخاصية:مطلق بحيث لا يؤدي إلى تمديد منفذ العرض في الارتفاع، لأن يحتوي Slidewrapper على خاصية الموضع: النسبية، قمنا بتعيين العرض على 100% من أجل توسيط الأزرار أفقيًا بالنسبة إلى إطار العرض باستخدام text-align:center، ثم باستخدام الخاصية السفلية نعلم الكتلة الخاصة بنا أنها يجب أن تكون على مسافة 20px من الحافة السفلية.
باستخدام الأزرار، نفعل نفس الشيء كما هو الحال مع الشرائح، لكننا الآن نمنحها العرض:inline-block ، لأن مع العرض: مضمن لا يستجيبون للعرض والارتفاع بسبب هم في كتلة وضعه تماما. دعونا نجعلها بيضاء، وباستخدام نصف القطر الحدودي المألوف بالفعل، نمنحها شكل دائرة. عندما نحرك الماوس فوقها، سنقوم بتغيير مظهر المؤشر الخاص بنا للعرض المعتاد.
الآن دعنا ننتقل إلى الجزء jQuery:
أولاً، لنعلن عن المتغير navBtnId، الذي سيخزن فهرس الزر الذي نقرنا عليه:
فار navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1!= SlideNow) (translatorWidth = -$("#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 ));
هنا، عندما ننقر على Slide-nav-btn، نستدعي وظيفة تقوم أولاً بتعيين فهرس الزر الذي تم النقر عليه لمتغير navBtnId، أي رقمه التسلسلي، نظرًا لأن العد التنازلي يبدأ من الصفر، فإذا انقر على الزر الثاني، ثم يتم كتابته على قيمة navBtnId 1. بعد ذلك، نقوم بإجراء فحص حيث نضيف واحدًا إلى الرقم التسلسلي للزر للحصول على رقم كما لو أن العد التنازلي لم يبدأ من 0، بل من 1، نحن قارن هذا الرقم بعدد الشريحة الحالية، إذا تطابقا، فلن نتخذ أي إجراءات، لأن الشريحة المطلوبة موجودة بالفعل في إطار العرض.
إذا كانت الشريحة التي نحتاجها ليست في مجال عرض إطار العرض، فإننا نحسب المسافة التي نحتاج من خلالها إلى تحريك غلاف الشريحة إلى اليسار، ثم نغير قيمة خاصية تحويل CSS للترجمة (نفس المسافة بالبكسل، 0) ). لقد فعلنا ذلك بالفعل أكثر من مرة، لذلك لا ينبغي أن يكون هناك أي أسئلة. في النهاية، نقوم مرة أخرى بحفظ قيمة الشريحة الحالية في متغير SlideNow؛ ويمكن حساب هذه القيمة عن طريق إضافة واحدة إلى فهرس الزر الذي تم النقر عليه.
هذا كل شيء، في الواقع، إذا كان هناك شيء غير واضح، فسأترك رابطًا إلى jsfiddle، حيث سيتم توفير جميع التعليمات البرمجية المكتوبة في المادة.
شكرًا لكم على اهتمامكم!
العلامات: إضافة العلامات
منذ بعض الوقت، بدأت في تعلم jQuery. أعتقد أن الجميع يعلم أن هذا هو اسم المكتبة الأكثر شيوعًا لتطوير وإنشاء البرامج النصية في JavaScript. بمساعدتها، من السهل جدًا إنشاء مذهلة و العناصر التفاعليةموقع.
في هذه المقالة، أريد أن أخبرك بكيفية إنشاء شريط تمرير عالمي بسيط باستخدام jQuery. في الواقع، الشبكة جدا عدد كبير منمجموعة متنوعة من أشرطة التمرير الجاهزة، والتي تبدو في بعض الأحيان مغرية جدًا، وعملية تمامًا، ولكننا سنصنعها من الصفر.
إذن، ما هي ميزات شريط تمرير jQuery الخاص بنا (الذي أسميه HWSlider) الذي يمكن ملاحظته؟
- سهولة الاستخدام والتصميم - أردت إنشاء برنامج نصي بسيط بدون أجراس وصفارات، لذلك لم أستخدم الرسوم المتحركة CSS3، وتبين أن الكود متعدد الاستخدامات ومفهوم للغاية.
- القدرة على إدراج الصورتين وأي كود HTML في الشرائح.
- إمكانية التمرير بين الشرائح بالترتيب (للأمام - للخلف) واختيار كل شريحة (1،2،3،4...)
- الروابط التي يتم إنشاؤها تلقائيًا (السابق - التالي، ومع أرقام الشرائح). كل ما عليك فعله هو إدخال العدد المطلوب من div، وسيتم حساب كل شيء آخر من تلقاء نفسه. حسنًا، تجدر الإشارة إلى أن عدد الشرائح غير محدود.
البرنامج النصي متوافق مع جميع المتصفحات الحديثة: IE، Opera، Firefox، Safari، Chrome (نظرًا لأن شريط التمرير لا يستخدم CSS3).
لنبدأ بترميز HTML. إلى المكان الصحيح صفحات HTMLأو يجب إدراج القالب.
إليك محتوى الشريحة 1 إليك محتوى الشريحة 2 إليك محتوى الشريحة 3
كل شيء بسيط هنا، كما ترون، يمكنك إدراج أي عدد تريده من الشرائح عن طريق إنشاء أقسام div جديدة. يمكنك إدراج أي كود HTML بداخلها، على سبيل المثال صورة أو كتلة نصية. لا تنسَ تضمين مكتبة jQuery نفسها مع جميع نصوص js النصية. إذا كنت لا تعرف كيف، انظر إلى المثال.
#slider-wrap( /* غلاف شريط التمرير والأزرار */ width:660px; ) #slider( /* غلاف شريط التمرير */ width:640px; height:360px; overflow: Hidden; border:#eee Solid 10px; الموضع: نسبي ؛ ) .slide( /* Slide */ width:100%; height:100%; ) .sli-links( /* أزرار لتغيير الشرائح */ Margin-top:10px; text-align:center;) .sli-links .شريحة التحكم (الهامش: 2 بكسل؛ العرض: كتلة مضمنة؛ العرض: 16 بكسل؛ الارتفاع: 16 بكسل؛ الفائض: مخفي؛ المسافة البادئة للنص: -9999 بكسل؛ الخلفية: url (radioBg.png) أسفل المركز no- كرر؛) .sli -links .control-slide:hover( cursor:pointer; ( /* الارتباط "التالي" و"السابق" */ العرض:كتلة; العرض:15px; الارتفاع:100%; الموضع:مطلق; أعلى:0; تجاوز السعة:مخفي; المسافة البادئة للنص:-999px; الخلفية:url(arrowBg) .png) المركز الأيسر بدون تكرار؛ العتامة: 0.8؛ المخطط التفصيلي: لا شيء! مهم؛) #prewbutton(left:10px;) #nextbutton( right:10px; الخلفية:url(arrowBg.png) المركز الأيمن بدون تكرار; ) #prewbutton:hover، #nextbutton:hover( opacity:1;)
دعونا ننظر إليها بمزيد من التفصيل. أولاً نعطي الكتلة الرئيسية بالمعرف "slider-wrap" العرض المطلوب. نظرًا لأنه تم إدراج جميع الكتل الأخرى فيه، فلا يلزم تحديد الارتفاع؛ فسيعتمد ذلك على ما بداخله. ثم نحتاج إلى ضبط أبعاد الحاوية التي سيتم وضع الشرائح فيها. هذا هو #المنزلق. لنمنحها العرض والارتفاع، بالإضافة إلى حد يبلغ 10 بكسل على سبيل المثال. العرض هنا هو 640 بكسل، وهو أقل من عرض الأصل، نظرًا لأننا نضيف حدودًا بحجم 10 بكسل على اليمين واليسار. ويعتمد عرض الشرائح نفسها (.slide) أيضًا على عرض القسم هذا.
والشيء الأخير: نحتاج إلى تعيين الموضع: بالنسبة لحاوية الشرائح نظرًا لأن الشرائح الموجودة بالداخل ذات موضع مطلق. بالنسبة للشرائح نفسها، يتم تعيين العرض والارتفاع فقط في CSS. يتم تعيين الخصائص المتبقية في البرنامج النصي jQuery.
Selector.sli-links عبارة عن كتلة تحتوي على أزرار للانتقال إلى الشريحة المطلوبة. هذه الأزرار هي عناصر بسيطةاكتب الرقم، والذي سيتم إدراجه بالكمية المطلوبة تلقائيًا، مع روابطparent.sli الخاصة بهم. بالنسبة للأزرار، قمنا بتعيين مظهر جميل، أي أننا نجعل كل زر مربعًا، ونحاذيهم جميعًا في المنتصف، وأيضًا بفضل الفائض: مخفي ومسافة بادئة للنص:-9999 بكسل، نزيل النص، ونترك فقط أيقونات الخلفية ، والتي تتغير أيضًا عند التمرير فوق عنصر المؤشر هذا. للراحة، استخدمت النقوش المتحركة، مما أدى إلى تقليل عدد الصور.
بعد ذلك، تم تصميم الزر النشط. نحن فقط نغير موضع الخلفية. ثم سنقوم بإعادة تصميم الروابط للانتقال إلى الشرائح التالية والسابقة. يمكنك منحهم أي تصميم، تمامًا مثل الأزرار. يتم إدراج هذه الروابط تلقائيًا داخل #slider. ولكن لجعلها مرئية، أعطيتها موضعًا مطلقًا وطبقة عليا (z-index:3) حتى تظهر فوق الشرائح. أعتقد أنه مع CSS، كل شيء واضح وبسيط هنا: يمكنك تغيير جميع الخصائص تقريبًا لتصميم شريط التمرير بالطريقة التي تريدها.
لننظر الآن إلى السيناريو نفسه:
فار hwSlideSpeed = 700؛ فار hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) ( $(".slide").css("position" : "absolute"، "top": "0"، "left": "0")).hide ().eq(0).show(); var SlideNum = 0; var SlideCount = $("#slider .slide").size(); var animSlide = function(arrow)( ClearTimeout(slideTime); $ (" .slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if( السهم == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( SlideNum = Arrow; ) $(".slide").eq( SlideNum) .fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active"); if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $( " #prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += "" + فهرس + "" )); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); فار وقفة = خطأ؛ var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), hwTimeOut);) ) $("#slider-wrap").hover(function( ))( ClearTimeout(slideTime); Pause = true;), function()(pause = false; rotator(); )); محور دوار()؛ ));
أولاً، يتم حفظ الإعدادات في متغيرات: hwSlideSpeed - سرعة قلب الشرائح، hwTimeOut - الوقت الذي تتغير بعده الشريحة تلقائيًا، hwNeedLinks - يتحكم في الارتباطات "التالي" و"السابق" - إذا كانت قيمة هذا المتغير هي صحيح، فسيتم عرض هذه الروابط، وإذا كانت خاطئة، فلن يتم عرضها (كما هو الحال في الصفحة الرئيسية لمدونتي).
بعد ذلك نقوم بتثبيت ما هو ضروري خصائص CSSللشرائح باستخدام طريقة .css(). نقوم بتكديس الكتل مع الشرائح فوق بعضها البعض باستخدام الموضع المطلق، ثم نخفيها كلها.hide()، ثم نظهر القطعة الأولى فقط. المتغير SlideNum هو رقم الشريحة النشطة، أي العداد.
المنطق الرئيسي لشريط تمرير jQuery الخاص بنا هو وظيفة animSlide. يستغرق معلمة واحدة. إذا قمنا بتمرير السلاسل النصية "next" أو "prew" إليه، فسوف يعمل عبارات شرطيةوسيتم عرض الشريحة التالية أو السابقة وفقًا لذلك. إذا أرسلنا رقمًا كقيمة، فسيصبح هذا الرقم هو الشريحة النشطة وسيتم عرضه.
لذلك تقوم هذه الوظيفة بإخفاء القسم الحالي، وحساب قسم جديد وإظهاره.
لاحظ أن التابع .fadeIn()، الذي يجعل الشريحة النشطة مرئية، يُعطى وسيطًا ثانيًا. هذه هي الوظيفة المزعومة أتصل مرة أخرى. يتم تنفيذه عندما تظهر الشريحة بالكامل. في هذه الحالة، يتم ذلك لضمان التمرير التلقائي للشرائح. تستدعي وظيفة الدوار الموضحة أدناه وظيفة animSlide مرة أخرى للتقدم إلى الشريحة التالية في الفاصل الزمني المطلوب: سنحصل على إغلاق يضمن التمرير المستمر.
كل شيء يعمل بشكل جيد، ولكننا نحتاج إلى إيقاف الأتمتة إذا قام المستخدم بتحريك المؤشر إلى شريط التمرير، أو الضغط على الأزرار. يتم إنشاء متغير الإيقاف المؤقت لهذا الغرض. إذا كانت قيمتها إيجابية - صحيح، إذن التبديل التلقائيلن يكون. باستخدام طريقة .hover()، نحدد: مسح المؤقت إذا كان قيد التشغيل - ClearTimeout(slideTime)، وضبط الإيقاف المؤقت = صحيح. وبعد تحريك المؤشر، قم بإيقاف الإيقاف المؤقت وتشغيل إغلاق rotator().
بالإضافة إلى ذلك، نحتاج إلى إنشاء عناصر جديدة على الصفحة ووضعها في المكان المناسب. باستخدام حلقة every() لكل شريحة (div مع الفئة .slide)، سنقوم بإنشاء عنصر امتداد بداخله رقم - رقم الشريحة. يتم استخدام هذا الرقم في وظيفة الرسوم المتحركة للانتقال إلى الشريحة بهذا الرقم. لنلف كل شيء في div بالفئات الضرورية، وفي النهاية سنحصل على الترميز التالي:
0 1 2 3
يبدو، لماذا نقوم بإنشاء العلامات داخل البرنامج النصي، وليس في كود HTML؟ الحقيقة هي أنه، على سبيل المثال، إذا قام المستخدم بتعطيل البرامج النصية، فلن يرى العناصر التي لن تعمل، وهذا لن يربكه. بالإضافة إلى ذلك، تم تبسيط الكود، وهو أمر جيد لتحسين محركات البحث.
ونتيجة لذلك، سيبدو تخطيط شريط التمرير على النحو التالي (استخدمت الصور كشرائح وقمت بتثبيت 5 منها):
0
1
2
3
يمكنك أدناه رؤية كيفية عمل شريط تمرير jQuery الخاص بنا على الصفحة التجريبية وتنزيل جميع المصادر الضرورية.
أخيرًا، هناك نقطتان حول دمج شريط التمرير هذا مع دروبال. يمكنك إضافة هذا الرمز إلى ملف قالب، على سبيل المثال في page.tpl.php، وإرفاق البرنامج النصي كملفات js منفصلة إلى السمة. يتم تمكين Jquery في Drupal افتراضيًا، ولكنه يعمل في وضع التوافق (). هناك خياران للتحسين. أو لف كل كود js:
(function ($) ( // كل التعليمات البرمجية الخاصة بك... ))(jQuery);
أو استبدل رموز $ في البرنامج النصي بـ jQuery. مثله:
JQuery(document).ready(function(e) ( jQuery(".slide").css(("position" : "absolute"، "top": "0"، "left": "0")).hide ().eq(0).show(); var SlideNum = 0; var SlideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow)( // إلخ.
لقد قام المثال بالفعل بتنفيذ الطريقة الأولى.
شكرا للقراءة! ترك التعليقات، ويأتي مرة أخرى. يمكنك أيضًا الاشتراك في خدمة RSS لتلقي تحديثات المدونة أولاً!
وأضاف: هذا ليس كل شيء. يقرأ. هناك سوف نقوم بإضافة ميزات جديدة لهذا البرنامج النصي.
ولكن بما أننا نتناول أساسيات JS، لدراسة القاعدة سأصف كيفية إنشاء شريط تمرير بسيط باستخدام فقط لغة جافا سكريبت. حسنًا، لنبدأ بتحليل المادة!
ما هي أنواع أشرطة التمرير الموجودة وأين قد تكون هناك حاجة إليها؟يلزم إنشاء معارض ملائمة لعرض الصور في جميع خدمات الويب التي تحتوي على بعض الصور الفوتوغرافية على الأقل. يمكن أن تكون هذه متاجر عبر الإنترنت ومواقع محفظة وخدمات إخبارية وتعليمية ومواقع ويب للشركات والمؤسسات الترفيهية مع تقارير مصورة وما إلى ذلك.
ومع ذلك، هذا هو الاستخدام القياسي للمتزلجون. تُستخدم هذه التقنيات أيضًا لجذب العملاء إلى السلع أو الخدمات الترويجية أو لوصف مزايا المؤسسات.
في الغالب، يطلب العملاء تنفيذه على المعارض من النوع "Carousel". هذا أداة سهلة الاستخداملعرض الصور في حجم كبيرمع قدرة المستخدم على تبديل الشرائح للأمام والخلف. في هذه الحالة، عادةً ما يتم تبديل الصور نفسها تلقائيًا عبر وقت محدد. تم تسمية هذه الآلية نظرًا لتكرار عرض الصور في دائرة.
اليوم، إذا كنت ترغب في ذلك، يمكنك العثور على المكونات الإضافية الأكثر غرابة وجاذبية على الإنترنت لعرض مجموعة من الصور.
نشاط مستقلحسنًا، لنبدأ الآن في إنشاء شريط التمرير الخاص بنا. في هذه المرحلة من التعلم، لتنفيذه، أقترح عليك استخدام pure . سيكون ذلك التبديل التلقائيالصور في دائرة.
أدناه لقد أرفقت كود البرنامجالتطبيق الخاص بك. لقد تركت تعليقات لك وأنا مشفرة.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
مبدل الصور التلقائي /* وصف مظهر الإطار، أساس شريط التمرير المستقبلي */ #slides( الموضع: نسبي؛ الارتفاع: 415 بكسل؛ العرض: 100%؛ الحشو: 0 بكسل؛ نوع نمط القائمة: لا شيء؛ مربع- الظل: 0 0 7px #010, 0 0 10px أزرق, 0 0 15px #010, 0 0 35px #010 ) /* تحرير عرض الصور*/ img ( width: auto; height: 390px; padding: 13px; ) /* يشير إلى أنه سيتم عرض عناصر قائمة المحتوى في وسط العنصر الأصلي، أي. في هذه الحالة، في وسط عنصر ul - أساس الشرائح */ li ( text-align: center; ) /* أصف مظهر الشرائح نفسها */ .slide( الموضع: مطلق; العتامة: 0 ; أعلى: 0px; اليسار: 0px; الارتفاع: 100%; -moz-transition: العتامة 1.5 ثانية; -webkit-transition: العتامة 1.5 ثانية; : 1;
أتمنى ألا تواجه أي مشاكل مع كود CSS وHTML. لكنني أعتبر أنه من الضروري تفكيك عمل البرنامج النصي. لذلك دعونا ننتقل إلى فك رموز ما هو مكتوب.
لذا، أولاً، باستخدام طريقة querySelectorAll، أقوم بتعيين متغير MySlider قائمة بجميع العناصر ضمن النطاق المحدد. يشير إلى هذا الإدخال
document.querySelectorAll("#slides .slide")
وبالتالي، يقوم MySlider بتخزين مجموعة من أربعة عناصر.
بعد ذلك، أحدد الصورة التي سأبدأ عرضها عن طريق تعيين متغير الصورة الحالية على صفر. ثم أشير إلى أن تغيير الشريحة يحدث خلال 2.7 ثانية ويجب استدعاء وظيفة معالجة الشريحة التالية.
دعنا ننتقل إلى الوظيفة نفسها.
في البداية، بالنسبة لعنصر القائمة الحالي، أقوم بتغيير وصف الفئات، أي. أعيد كتابة "عرض الشرائح" إلى "شريحة". ونتيجة لذلك، تصبح الصورة غير مرئية.
الآن أقوم بتحديد عنصر جديدالمجموعة التي سيتم عرضها على الشاشة. للقيام بذلك، أتخذ الموضع الحالي +1. ربما لاحظت أنني أستخدم أيضًا القسمة مع الباقي (٪) على عدد الشرائح المتاحة. هذه الخدعة بالأذنين ضرورية لبدء العرض في دائرة جديدة. هذا هو ما سيبدو حرفيا.