قائمة طعام
مجاني
التسجيل
الصفحة الرئيسية  /  البرامج/ شريط تمرير بسيط مع معاينة jquery. شريط تمرير بسيط مع أزرار تحكم للأمام والخلف

شريط تمرير بسيط مع معاينة jquery. شريط تمرير بسيط مع أزرار تحكم للأمام والخلف

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



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


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


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


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


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


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


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



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


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


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. إذا اخترنا الخيار الثاني ، ثم مع الخاصية تجاوز منفذ العرض: مخفيلن يبدو لنا أي شيء على الإطلاق ، 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 للخلف ، لذلك نغير الخاصية مرة أخرى تحويل ل slidewrapper... الصيغة كما يلي: (عرض شريحة واحدة) * (رقم الشريحة الحالية - 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
  • لغة البرمجة
اضف اشارة

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

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

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

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

الخصائص

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

اتصال

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

ترميز HTML

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

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

جافا سكريبت

بعد الاتصال slidr.jsسيصبح كائن 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 موضحة في الجدول أدناه.

معامل نوع من تقصير وصف
بعد، بعدما وظيفة وظيفة رد الاتصال بعد تغيير الشريحة
قبل وظيفة وظيفة رد الاتصال قبل تغيير الشريحة
فتات الخبز منطقي خاطئة عرض فتات الخبز للتحكم في الشرائح. صحيحة أو خاطئة.
ضوابط سلسلة الحدود ترتيب الأسهم للتحكم في الشرائح. الحد أو الزاوية أو لا شيء.
اتجاه سلسلة عرضي الاتجاه الافتراضي للشرائح الجديدة. أفقي أو h ، عمودي أو v.
يختفي منطقي حقيقية تفعيل تأثير التلاشي / التدريجي. صحيحة أو خاطئة.
لوحة المفاتيح منطقي خاطئة قم بتمكين تغيير الشرائح باستخدام لوحة المفاتيح. صحيحة أو خاطئة.
تجاوز منطقي خاطئة تمكين تجاوز لكتلة شريط التمرير. صحيحة أو خاطئة.
وقفة منطقي خاطئة لا تقم بتغيير الشرائح تلقائيًا عند تمرير الماوس (تحتاج إلى تشغيل تلقائي ()). صحيحة أو خاطئة.
سمة سلسلة #fff لون عناصر تحكم شريط التمرير (فتات الخبز والأسهم). #hexcode أو rgba (قيمة).
توقيت موضوع {} توقيت الرسوم المتحركة المخصصة للتطبيق. ("الانتقال": "التوقيت").
لمس. اتصال. صلة منطقي خاطئة تمكين التحكم باللمس على الأجهزة المحمولة. صحيحة أو خاطئة.
انتقال سلسلة خطي تأثير انتقال الشرائح. مكعب أو خطي أو يتلاشى أو لا شيء.

تتلقى وظائف رد الاتصال بعد وقبلها البيانات التالية:

(المعرف: "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. * / إصدار الوظيفة () () ؛ / ** * تأثيرات الانتقال المتوفرة. *return (صفيف) من الانتقالات. * / وظيفة انتقالات () () ؛ / ** * إنشاء وإرجاع Slidr. * سيؤدي استدعاء هذه الوظيفة مرتين على نفس العنصر إلى إرجاع كائن Slidr الذي تم إنشاؤه بالفعل. * معرف عنصرparam (سلسلة) لـ Slidr. *param (Object =) opt_settings إعدادات شريط التمرير. * / وظيفة إنشاء (معرف ، opt_settings) () ؛

المنزلق API

// تهيئة Slidr بالإعدادات المخصصة var s = slidr.create ("slidr-api-demo" ، (فتات الخبز: صحيح ، تجاوز: صحيح)) ؛ // أضف شرائح أفقية بتأثير انتقال قياسي. // يتيح عنصر المصفوفة المكرر "واحد" في النهاية لـ Slidr // تمرير الشرائح إلى ما لا نهاية s.add ("h"، ["one"، "two"، "three"، "one"])؛ // يضيف شريحة عمودية بتأثير انتقال مكعب. s.add ("v" ، ["خمسة" ، "أربعة" ، "ثلاثة" ، "خمسة"] ، "مكعب") ؛ // قم بتشغيل شريط التمرير. s.start () ؛

دخول قصير

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

يتم عرض القائمة الكاملة لوظائف Slidr.js API أدناه.

/ ** * ابدأ في Slidr! * البحث عن الشرائح تلقائيًا لإنشائها إذا لم تتم إضافة أي شيء قبل بدء الاستدعاء (). *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 ، فسيتم تغيير حجم شريط التمرير ليناسب المحتوى ، مع مراعاة هذه القيم. خلاف ذلك ، سيتم إجراء تغيير الحجم تلقائيًا.

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

حسن
خلاب
لا يصدق

أبعاد ثابتة

حسن
خلاب
لا يصدق

ضوابط Slidr

فيما يلي ترميز عناصر التحكم:

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

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

يتم تنفيذ التحكم في السهم باستخدام: بعد المحدد الزائف ، لذلك لإخفائه ، استخدم الكود التالي:

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

فتات الخبز سلايدر

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

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

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

رخصة

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

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

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

2. شريط التمرير على Glide.js

شريط التمرير هذا مناسب لأي موقع. يستخدم المصدر المفتوح Glide.js. يمكن تغيير ألوان شريط التمرير بسهولة.

3. عرض شرائح المحتوى المائل

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

4. شريط التمرير باستخدام قماش HTML5

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

5. شريط تمرير "تحويل الصور"

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

6. شريط تمرير دائري

شريط تمرير على شكل دائرة مع تأثير انعكاس.

7. عدم وضوح الخلفية المنزلق

شريط التمرير التكيفي مع التبديل وطمس الخلفية.

8. شريط تمرير الموضة التكيفي

شريط تمرير موقع ويب بسيط وخفيف الوزن وسريع الاستجابة.

9. Slicebox - منزلق صورة jQuery 3D(محدث)

نسخة محدثة من شريط تمرير Slicebox مع إصلاحات وميزات جديدة.

10. شبكة الصور المتحركة المستجيبة المجانية

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

11. فليكسلايدر

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

12. إطار الصورة

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

ملاحظة.أضع شريط التمرير عدة مرات وأعتقد أنه من الأفضل

13. منزلق معرض ثلاثي الأبعاد مجاني وسريع الاستجابة مع الصور المصغرة.

شريط تمرير المعرض التجريبي 3DPanelLayoutمع تأثيرات الرسوم المتحركة المتشابكة والمثيرة للاهتمام.

14. شريط التمرير على css3

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

15. WOW المنزلق

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

17. مرونة

شريط تمرير مرن مستجيب بالكامل مع صور مصغرة للشرائح.

18. شق

إنه شريط تمرير سريع الاستجابة بملء الشاشة باستخدام الرسوم المتحركة css3. شريط التمرير مصنوع في نسختين. الرسوم المتحركة غير عادية وجميلة.

19. معرض الصور التكيفي زائد

معرض منزلق مجاني بسيط مع الصور التي تم تحميلها.

20. شريط تمرير مستجيب لـ WordPress

شريط تمرير سريع الاستجابة لـ WP.

21. شريط تمرير محتوى المنظر

شريط تمرير مع تأثير اختلاف المنظر والتحكم في كل عنصر باستخدام CSS3.

22. المتزلج مع ربط الموسيقى

شريط التمرير باستخدام JPlayer مفتوح المصدر. يشبه شريط التمرير هذا عرضًا تقديميًا به موسيقى.

23. المنزلق مع jmpress.js

يعتمد شريط التمرير سريع الاستجابة على jmpress.js وبالتالي يسمح لك باستخدام بعض التأثيرات ثلاثية الأبعاد الرائعة على الشرائح الخاصة بك.

24. تحوم سريع عرض الشرائح

عرض الشرائح مع التبديل السريع بين الشرائح. تبديل الشرائح عند التمرير.

25. صورة أكورديون مع CSS3

الأكورديون للصور باستخدام css3.

26. برنامج Touch Optimized Gallery Plugin

إنه معرض سريع الاستجابة تم تحسينه للأجهزة التي تعمل باللمس.

معرض 27.3D

معرض الجدار ثلاثي الأبعاد- تم إنشاؤه لمتصفح Safari ، حيث سيكون التأثير ثلاثي الأبعاد مرئيًا. إذا تم عرضها في متصفح مختلف ، فستكون الوظيفة جيدة ولكن التأثير ثلاثي الأبعاد لن يكون مرئيًا.

28. المنزلق ترقيم الصفحات

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

29. مونتاج الصور مع jQuery

تحديد المواقع التلقائي للصور بناءً على عرض الشاشة. شيء مفيد للغاية عند تطوير موقع محفظة.

30.3D معرض

منزلق دائري ثلاثي الأبعاد بسيط في css3 و jQuery.

31. وضع ملء الشاشة مع تأثير ثلاثي الأبعاد على css3 و jQuery

شريط تمرير ملء الشاشة مع انتقال جميل.

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

وصف عمل المنزلق.

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

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

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

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

ترميز HTML

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

> >

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

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

تحدد حاوية .slider-box أبعاد شريط التمرير. الخاصية overflow: hidden تقوم بإخفاء جميع العناصر التي لا تقع داخل المنطقة داخل العنصر.

تم ضبط الحاوية المنزلق على عرض كبير. هذا ضروري حتى تناسبه جميع الشرائح.

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

يوجد أدناه تخطيط تخطيطي للكتل المنزلق.

النصي

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

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

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

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



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


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


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


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


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


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


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



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


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


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. إذا اخترنا الخيار الثاني ، ثم مع الخاصية تجاوز منفذ العرض: مخفيلن يبدو لنا أي شيء على الإطلاق ، 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 للخلف ، لذلك نغير الخاصية مرة أخرى تحويل ل slidewrapper... الصيغة كما يلي: (عرض شريحة واحدة) * (رقم الشريحة الحالية - 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 ، حيث سيتم توفير كل الكود المكتوب في المادة.




شكرا للانتباه!

العلامات: إضافة العلامات