إنشاء منزلق صورة jQuery بسيط مع عتامة أو تأثيرات انزلاقية

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

EQ () يختار عنصرًا يعتمد على قيمة الفهرس.

fadein / fadeout effect

html:
• 
• 
...

• 1
• 2
...

css:

الموقف: قريب } ul.images li { الموقف: مطلق ؛ }

jQuery: var المشغلات = $ ('ul.triggers li') ؛ var images = $ ('ul.images li') ؛ var lastelem = triggers.length - 1 ؛ المشغلات. first (). addClass ('نشط') ؛ Images.Hide (). first (). show () ؛ وظيفة SliderResponse (الهدف) { صور. triggers.removeclass ('Active'). Eq (Target) .addClass ('active') ؛ }

2. تأثير الانزلاق

• 
• 
...

• 1
• 2
...

html:

نفس تأثير fadein/fadeout

تعويم: اليسار. الهامش: 40 بكسل ؛ العرض: 270 بكسل ؛ الارتفاع: 266 بكسل ؛ الفائض: مخفي. } ul.images { الموقف: قريب أعلى: 0px ؛ اليسار: 0px ؛ } /* يجب أن يكون هذا العرض هو العرض الإجمالي للصور ، المحسوبة باستخدام jQuery. */ ul.images li { تعويم: اليسار. }

• 
• 
...

• 1
• 2
...

jQuery: var المشغلات = $ ('ul.triggers li') ؛ var images = $ ('ul.images li') ؛ var lastelem = triggers.length - 1 ؛ var mask = $ ('. Mask ul.images') ؛ var imgwidth = images.width () ؛ المشغلات. first (). addClass ('نشط') ؛ Mask.css ('width' ، imgwidth * (lastelem 1) 'px') ؛ وظيفة SliderResponse (الهدف) { mask.stop (true ، false) .animate ({'left': '-' imgwidth * target 'px'} ، 300) ؛ triggers.removeclass ('Active'). Eq (Target) .addClass ('active') ؛ }

• 
• 
...

• 1
• 2
...

استجابة jQuery المشتركة

المشغلات ، انقر فوق الأحداث ، والتوقيت:

if (! $ (this) .hasclass ('active')) { الهدف = $ (هذا) .index () ؛ SliderResponse (الهدف) ؛ إعادة التوطين () ؛ } }) ؛ $ ('. التالي'). انقر فوق (function () { Target = $ ('ul.triggers li.active'). index () ؛ الهدف === LastElem؟ الهدف = 0: الهدف = الهدف 1 ؛ SliderResponse (الهدف) ؛ إعادة التوطين () ؛ }) ؛ $ ('. Target = $ ('ul.triggers li.active'). index () ؛ LastElem = triggers.length - 1 ؛ الهدف === 0؟ الهدف = LastElem: Target = Target - 1 ؛ SliderResponse (الهدف) ؛ إعادة التوطين () ؛ }) ؛ وظيفة slidertiming () { Target = $ ('ul.triggers li.active'). index () ؛ الهدف === LastElem؟ الهدف = 0: الهدف = الهدف 1 ؛ SliderResponse (الهدف) ؛ } var timingRun = setInterval (function () {slidertiming () ؛} ، 5000) ؛ وظيفة Resettiming () { ClearInterval (TimingRun) ؛ timingRun = setInterval (function () {slidertiming () ؛} ، 5000) ؛ }

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