بسيط كاروسيل مع ترحيل عن طريق Mootools

مع مجموعة متنوعة من دوارات هناك، والعديد من Mootools كذلك، قررت أن أكتب لا يزال صفي كاروسيل الخاصة، لبعض أسباب وجيهة
1. يريد ميزة الترحيل (لتكون قادرة على القفز شريحة معينة / خطوة في دائري).
2. أراد الحرية مع التنسيب من الأزرار اليسار واليمين / وصلات، حيث من أي وقت مضى لي من فضلك.
3. مزيد من السيطرة على خطوات الشرائح.

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

بلدي على سبيل المثال يبدو مثل هذا ... [ عرض الفيلم ]
Mootools كاروسيل مع ترحيل

عرض تجريبي | تحميل Mootools كاروسيل مع ترحيل الإصدار 1.0 (يتم تنزيله 2000 مرة)


1. دائري ترحيل

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

فار carousel1 = جديد MooCarousel ('carousel1_wrapper'، 'carousel1_items_container'، 'carousel1_moveleft'، 'carousel1_moveright'، c_ns، c_sss، صحيح)؛ / / نانوثانية = عدد من الشرائح، ونظام الضمان الاجتماعي خطوة الشريحة = حجم

ويمكن أن فكورسي تغيير هذه النظرة achors ترحيل-N-يشعر كما تريد من خلال تعديل CSS الخاصة بهم.

. carousel_paging {مواءمة النصوص: حق؛ الهامش: 5PX 10px 0 0؛}
. carousel_paging الحالي، carousel_paging الصفحة {الخطوط العريضة: لا شيء؛ العرض:. 15px؛ الطول: 15px؛ خط الطول: 15px؛ مواءمة النصوص: المركز؛ العرض: كتلة، تعويم: غادر؛ خلفية: # D8D8EB؛ هامش: 0 1px 0 0؛ النص الديكور: لا شيء؛}

. carousel_paging أ: تحوم، carousel_paging الحالية {خلفية: # 4D4D9B؛ اللون: # FFFFFF؛}.

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

2. Customising رموز اليسار واليمين

يمكنك تغيير موضع أو الصور أو أي ممتلكات displat من أزرار اليمين واليسار لمجرد اللعب حولها مع CSS. لتكون قادرة على تغيير المواضع من buttoms اليسار واليمين وكان السبب الحقيقي بالنسبة لي أن حق طبقتنا بلدي كاروسيل.
منذ هذه الفئة MooCarousel، يقبل معرف لهذه الأزرار، يمكنك وضع هذه الأزرار في الواقع في أي مكان على الصفحة، وإذا كنت من فضلك ... لا يجب أن تكون في التسلسل الهرمي عنصر، كما هو الحال في بلدي على سبيل المثال.

فار carousel1 = جديد MooCarousel ('carousel1_wrapper'، 'carousel1_items_container'، 'carousel1_moveleft'، 'carousel1_moveright'، c_ns، c_sss، صحيح)؛

CSS
.. carousel_container_l، carousel_container_r {الهامش: 50px 0 0 0؛ الموقف: النسبية؛ العرض: 23px؛ الطول: 20px؛ تعويم: غادر؛ المؤشر: المؤشر؛}

. carousel_container_r {الخلفية الموقف: 0-38px؛}

. carousel_container_l {الخلفية الموقف: 0-58px؛}

3. Customising خطوات الشرائح

ماذا يعني خطواتي SLIDE CUSTOMISING؟
معظم دوارات حرك كامل مع الإطار مرئية. لذلك نقول لكم كان أربعة وحدات (كما هو الحال في عينتي أعلاه)، فإنه ينزلق جميع البنود الأربعة. مع هذا المكون كاروسيل، يمكنك تمرير عدد من الشرائح وحجم الخطوة التي تختارها.

فار carousel1 = جديد MooCarousel ('carousel1_wrapper'، 'carousel1_items_container'، 'carousel1_moveleft'، 'carousel1_moveright'، c_ns، c_sss، صحيح)؛
c_ns = عدد من الشرائح، c_sss خطوة الشريحة = حجم

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

/ * للإحتفال صاخب مخمور 1 * /

فار c1_w = 92؛ العرض البند / / إحتفال صاخب مخمور

فار c1_n = 10؛ عدد / / الإجمالي للعناصر إحتفال صاخب مخمور Comparision

فار c1_pp = 4 / / عدد من إحتفال صاخب مخمور Comparision عناصر perpage

فار c1_marginFactor = 51؛

فار c1_sss = c1_w * c1_pp / / نظام الضمان الاجتماعي خطوة الشريحة = حجم

فار c1_ns parseInt = (((* c1_w c1_n) / c1_sss) + 0.5) / / نانوثانية = عدد الشرائح

c1_sss + = c1_marginFactor / / الشريحة = SSS حجم الخطوة، و 51 للهوامش


المتطلبات: Mootools 1.2

عرض تجريبي | تحميل Mootools كاروسيل مع ترحيل الإصدار 1.0 (يتم تنزيله 2000 مرة)


15 الردود على "كاروسيل بسيطة مع النداء الآلي عن طريق Mootools"

  • lordfpx يقول:

    مرحبا!

    أنا developping موقعي الجديد باستخدام mootools وأنا فقط وجدت هذه دائري كبير عن القائمة مقالتي! قبل كنت تستخدم بلدي، ولكن من دون ترحيل.

    الآن، ودائري يعمل على ما يرام، ولكن ... من جهتي من رمز mootools الإداري عند _ النقر وonmouse لا يعمل معها مرة أخرى .. وتعمل في أقرب وقت ممكن أنا حذف رمز دائري.

    هل يمكن أن تساعدني في العثور على ما هو الخطأ؟

    هنا الصفحة: http://new.lordfpx.com ، حق بعد افتتاح القائمة، سترى لم تتمكن من الضغط على مقال. يمكنني أن أعطيك رمز إذا كنت تريد.

  • نيخيل يقول:

    Lordfpx،
    رأيت صفحة في فايرفوكس 3، ولكن فهم الطعجه تماما، ماذا تقصد ب "حق بعد افتتاح القائمة، انظر سوف لا يمكن النقر على مقال".

    أيضا، لم أكن لاحظ أن لا يتم تحميل الصفحة بشكل جيد في IE7 (هناك أخطاء وقت التشغيل)

    لا تتردد في ارسال لي رمز الخاص بك على nik1409 [في] gmail.com، وسوف نكون سعداء لديها نظرة على ذلك، إذا كان ذلك يساعد في أي حال

    التحيات
    N

  • lordfpx يقول:

    نعم، آسف، أنا لم تختبر الصفحة على IE7 حتى الآن.

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

    سأرسل لك صفحاتي في وقت لاحق منذ أنا في العمل.

    وبفضل الكثير!

  • lordfpx يقول:

    اكتشفت حيث كان خطأي!

    بما أنني لا يريد من "رموز اليسار واليمين" ... أنا لم وضعها على الصفحة الخاصة بي، وأنا tryed فقط لمعرفة ما اذا كان ذلك بسبب أن ... ونعم هو الحال ...

    أعتقد أنني سوف إخفائها على موقعي.

    شكرا

  • نيخيل يقول:

    يا Lordfpx،

    شكرا لإعلامنا ... وهذا البعض قد مفيدة لغيرها تحاول ان تفعل الشيء نفسه.

    التحيات
    نيك

  • ماثيو يقول:

    مهلا، عمل لطيف :) فهل يمكن أن تقولوا لي كيف يمكنني أن أفعل هذا الترحيل في mootools 1.1؟ أنا لم تتحرك حتى الآن إلى 1.2.
    شكرا :)
    mortal.matt جوجل

  • ماثيو يقول:

    آسف هذا mortal.matt (على) جوجل (نقطة) كوم، شكرا مرة أخرى :)

  • آدم بلاكي يقول:

    مرحبا،

    من فضلك هل يمكن ان تخبرني كيف جعل هذه المسرحية السيارات؟

    هتافات، آدم

  • جورج يقول:

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

  • نيخيل يقول:

    لا تتردد في استخدام ما تشاء انها ....

  • kovi يقول:

    مرحبا،

    هذا هو حقا فكرة جيدة، ولكن عندما تستخدم شبيبة من http://mootools.net/download (بسبب بعض الآثار الأخرى، أنا باستخدام) بدلا من mootools12_all_p.js الخاص فإنه يتوقف عن العمل ... كيف يمكنني حل هذه ؟ شكرا جزيلا.

  • تود يقول:

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

  • بالو يقول:

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

    carouselItems = $ $ ('carousel1_items.')؛
    .. c1_w = carouselItems [0] getSize () X / / إحتفال صاخب مخمور عرض السلعة
    c1_n = carouselItems.length؛ عدد / / الإجمالي للعناصر إحتفال صاخب مخمور
    . c1_pp = $ ('carousel1_wrapper') getSize () .x/c1_w / / عدد من عناصر perpage إحتفال صاخب مخمور

    قد parseInt أيضا () أن يكون على حساب خاطئ الذي يجعلك تضيع شريحة. أفضل استخدام سقف ():

    فار c1_ns سقف = (((* c1_w c1_n) / c1_sss)) / / نانوثانية = عدد الشرائح

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

  • بالو يقول:

    آسف، يجب ان تكون Math.ceil () :-)

  • كارتر يقول:

    وهناك طريقة سهلة لجعل هذه المسرحية السيارات؟

ترك الرد

NDK الرئيسية | معربا عن تكنولوجيا المعلومات | الحنك تعرب | Penmenship تعرب | الرهبة تعرب | تعرب عن نفسي