لقد كتبت ثلاثة صور كارويلز بنفسي. يتم تنفيذ واحد في JS الأصلي البسيط وليس له آثار الرسوم المتحركة. يتم تنفيذ الآخر بالاشتراك مع jQuery ويتم تبديله داخل وخارج. الآن أريد أن أجعل واحدة أكثر برودة على مدونتي أو موقع الويب الشخصي ، ويمكنني عرض أعمالي الخاصة في ذلك الوقت. بعد فترة من الوقت للتسوق في MOOC ، وجدت أن هناك دورة مكون من قِبل jQuery Carousel ، والتي كانت رائعة بعض الشيء ، لذلك فكرت في تغليفه في JS الأصلي. فقط بعد القيام بذلك ، لم يكن الأمر سهلاً كما اعتقدت. . . دعونا لا نتحدث عن ذلك بعد الآن ، دعنا نوضح عملية التنفيذ.
2. التأثير
لأن الخادم الخاص بي لم يتم تثبيته بعد. لا يوجد مظاهرة عبر الإنترنت (Orz ...) ، لذلك لا يمكنني إلا وضع عرض.
لا يزال من الممكن رؤية التأثير التقريبي من الصور ، لذلك لن أقول الكثير. إذا كنت ترغب في رؤية تأثير الكود الحقيقي ، مرحبًا بك في رمز تنزيل github الخاص بي. لا تنس أن تعطيني نجمًا في مشروع GitHub الخاص بي^_^
ثالثا. عملية التنفيذ
هيكل HTML
<div-setting = '{"عرض": 1000 ، "الارتفاع": 400 ، "carrouselwidth": 750 ، "carrouseLheight": 400 ، "Scale": 0.9 ، "verticalalign": "middle"}'> <div> </viv> <ul> <li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#" <a href = "#"> <img src = "img/4.jpg"> </a> </li> <li> <a href = "#"هذا الهيكل هو نفسه بنية رمز HTML من الكاروسيل العامة. الفرق الطفيف هو أن هناك خاصية وضع البيانات على Div Carousel الرئيسية ، والتي تحتوي على بعض معلمات تأثيرات carousel. سيتم شرح الأهمية المحددة للمعلمات لاحقًا.
لن يتم نشر رمز جزء CSS. أهم شيء هو الانتباه إلى تحديد المواقع المطلقة للعناصر. كما يتضح من العروض ، فإن موضع وحجم كل صورة مختلفان ، بحيث يتم التحكم فيها من خلال JS ، لذلك يلزم تحديد المواقع المطلقة. دعونا نركز على عملية تنفيذ JS.
عملية تنفيذ JS
دعنا نتحدث عن بعض الخطوات الرئيسية في JS. بعد القيام بهذه الخطوات ، لا ينبغي أن تكون هناك صعوبات.
المعلمات default
نظرًا لأنه مكون إضافي للحزمة ، فستكون هناك بالتأكيد بعض القيم الافتراضية للمعلمات التي يجب تكوينها. في هذا البرنامج المساعد ، تكون المعلمات التالية أساسًا:
العرض: 1000 ، // عرض منطقة الشريحة
الارتفاع: 400 ، // ارتفاع منطقة الشريحة
CarrouseLwidth: 700 ، // عرض الإطار الأول من الشريحة
CarrouseLheight: 400 ، // ارتفاع الإطار الأول من الشريحة
المقياس: 0.9 ، // سجل علاقة المقياس ، على سبيل المثال ، مقدار عرض وارتفاع الصورة الثانية أصغر من الصورة الأولى عند عرضها.
Autoplay: True ، // هل يتم تشغيله تلقائيًا؟
الزمن: 3000 ، // الفاصل الزمني للتشغيل التلقائي
verticalalign: "Middle" // محاذاة الصورة ، هناك ثلاث طرق: أعلى/منتصف/أسفل ، الافتراضي هو الأوسط
complassion الكائن
نظرًا لأن موقع الويب قد يستخدم نفس المكونات الإضافية في أماكن متعددة ، فإن العبوة أمر بالغ الأهمية. بعد تحديد هذا الكائن ، إذا حددت طريقة التهيئة للكائن ، فيمكنك إنشاء كائنات متعددة. تحتاج فقط إلى تمرير نفس DOM من جميع الفئات فيه. لذا ، فإن طريقة التهيئة الخاصة بي هي كما يلي:
carousel.init = function (carrousels) {var _this = this ؛ // تحويل nodelist إلى صفيف var cals = tararray (carrousels) ؛ <br> /*لأن JS الأصلي يحصل على جميع الفصول ، فإن ما تحصل عليه هو Nodelist ، وهو صفيف الفصل. إذا كنت ترغب في استخدام طريقة صفيف ، فأنت بحاجة إلى تحويلها إلى صفيف حقيقي. هنا tararray هي طريقة التحويل. */ cals.foreach (وظيفة (العنصر ، الفهرس ، المصفوفة) {new _this (item) ؛}) ؛ }وبهذه الطريقة ، عندما أكون على window.onload ، أدعو carrousel.init (document.queryselectorall ('. carrousel-main')) ؛ بهذه الطريقة يمكنني إنشاء العديد من الكاروسيل!
③Initialiation معلمات الموضع للإطار الأول
نظرًا لأن المعلمات ذات الصلة لجميع الإطارات بعد الإطار الأول يتم تعريفها مع الإشارة إلى الإطار الأول ، من المهم تحديد الإطار الأول جيدًا.
setValue: function () {this.carrousel.style.width = this.settings.width+'px' ؛ this.carrousel.style.height = this.settings.height+'px' ؛ /*إعدادات الزر الأيسر واليسرى ، هنا ، يتم طرح المنطقة بعد الأزرار اليسرى واليسرى من عرض الإطار الأول. Z-Index أعلى من جميع الصور باستثناء الإطار الأول ، ويتم وضع الصور لليسار واليمين للتو ، وبالتالي فإن قيمة z-index هي نصف عدد الصور. */ var btnw = (this.settings.width-this.settings.carrouselwidth)/ 2 ؛ this.prebtn.style.width = btnw+'px' ؛ this.prebtn.style.height = this.settings.height+'px' ؛ this.prebtn.style.zindex = math.ceil (this.carrouseLitems.length/2) ؛ this.nextbtn.style.width = btnw+'px' ؛ this.nextbtn.style.height = this.settings.height+'px' ؛ this.nextbtn.style.zindex = math.ceil (this.carrouseLitems.length/2) ؛ // الإعدادات الأولى ذات الصلة بالإطار هذا. this.carrouselfir.style.top = this.setCarroUselalign (this.settings.carrouseLheight)+'px' ؛ this.carrouselfir.style.width = this.settings.carrouselwidth+'px' ؛ this.carrouselfir.style.height = this.settings.carrouseLheight+'px' ؛ this.carrouselfir.style.zindex = math.floor (this.carrouseLitems.length/2) ؛} ،هنا ، عند استخدام الكائن الجديد ، انتقل إلى عقدة DOM للحصول على معلمات وضع البيانات ثم تحديث تكوين المعلمة الافتراضية. هناك مكان يجب ملاحظته هنا. لا يمكنك تحديث المعلمات الافتراضية مباشرة عن طريق تعيين القيم عند الحصول على المعلمات ، لأنه عندما يقوم المستخدمون بتكوين المعلمات ، قد لا يتم تكوين جميع المعلمات مرة واحدة. إذا تم تعيين القيمة مباشرة وتحدث المستخدم ، فستفقد المعلمات. لقد كتبت هنا طريقة تمديد الكائن مماثلة لطريقة $ .extend في jQuery لتحديث المعلمات. لن أدرج التفاصيل ، إذا كنت مهتمًا ، فيمكنك تنزيلها.
④ إعدادات موقع الصورة الأخرى
الصورة هنا هي في الواقع الصورة باستثناء الصورة الأولى إلى صورتين الأيسر واليسرى ، ويختلف موضع الصورة على اليسار واليمين ، لذلك يجب تكوينه بشكل منفصل:
// قم بتعيين العلاقة الموضعية للصورة على VAR rightIndex اليمنى = المستوى ؛ الحقوق. Z-onde على اليمين أصغر ، ويمكن انخفاض عدد الصور تدريجياً عن طريق استخدام Item.Style. طريقة الحساب هنا هي: طرح عرض الإطار الأول ، وقسّل 2 ، ثم قسّم عدد الصور الموجودة على العنصر الأيسر أو الأيمن. item.style.top = carrouseLself.setCarrouSelalign (rh)+'px' ؛}) ؛
طريقة الإعداد على اليسار متشابهة وأبسط ، لذلك لن أخوض في التفاصيل.
⑤ اضبط حجم موضع جميع الصور أثناء الدوران
هذه الخطوة مهمة جدا. النقر فوق الزر التالي على الزر الأيمن هو الدوران الأيسر ، والنقر فوق الزر السابق على الزر الأيسر هو الدوران الأيمن. في هذا الوقت ، نحتاج فقط إلى النظر في جميع الصور كحلقة ، وانقر مرة واحدة ، وتغيير الموضع وأكمل الدوران. على وجه التحديد عندما يتم تشغيل الدوران الأيسر ، اجعل معلمات الصورة الثانية مساوية للصورة الأولى ، الصورة الثالثة مساوية للصورة الثانية ... والصورة الأخيرة تساوي الصورة الأولى. عند الدوران اليمين ، اجعل معلمة الصورة الأولى مساوية للصورة الثانية ، معلمة الصورة الثانية مساوية للصورة الثالثة ... ومعلمة الصورة الأخيرة مساوية للصورة الأولى.
لنتحدث عن الدوران الأيسر هنا
إذا (dir == 'left') {toArray (this.carrouseLiTems). zIndex=pre.style.zIndex; var opa=pre.style.opacity; var top=pre.style.top; var left=pre.style.left; }else{ var width = tempWidth; var height = tempHeight; var zIndex = tempZIndex; var opa = tempOpacity; var top = tempTop; var left = tempLeft; } //Note here, because the second picture refers إلى الصورة الأولى ، يجب أن يتم حفظ الصورة الأولى بشكل مؤقت. item.Style. function_this.rotateflag = true ؛سيبدو الدوران هنا قاسيًا إذا لم تستخدم بعض الرسوم المتحركة أكثر من اللازم. لكن JS الأصلي ليس لديه وظائف متحركة ، هنا كتبت وظيفة الرسوم المتحركة المقلدة بنفسي. المبدأ هو الحصول على قيمة النمط الأصلي لـ DOM ومقارنتها بالقيمة التي تم تمريرها حديثًا. استخدم بعض الطرق لتحديد السرعة. سرعتي هنا هي تقسيم الفرق البالغ 18. بعد ذلك ، يكون المؤقت واضحًا في كل مرة تتم فيها إضافة قيمة النمط الأصلي إلى القيمة الواردة. لمزيد من التفاصيل ، يرجى الاطلاع هنا.
حسنًا ، النقاط الرئيسية هي نفسها تقريبًا ، ويجب أن يكون الأمر سهلاً إذا فهمت هذه العمليات!
4. الملخص والتفكير
تلخيص:
أنا شخصياً أعتقد أن هذا مكون إضافي سهل الفهم نسبيًا. سيكون من السهل جدًا القيام بذلك مع jQuery. ومع ذلك ، إذا كتبت من الأصل ، فلا تزال تشعر بسلاسة أقل قليلاً. يجب أن تكون الرسوم المتحركة المخصصة ليست جيدة مثل الرسوم المتحركة التي تغليفها jQuery.
أيضًا ، نظرًا لأن الصور يجب تقسيمها بالتساوي على جانبي الجانبين الأيسر واليمين ، ولأعداد زوجية من الصور ، فإن الطريقة المستخدمة هنا هي استنساخ الصورة الأولى ، ثم إضافتها إلى النهاية ، وتشكيل رقم فردي.
يفكر:
إذا كان هناك خطأ ، فهذا يعني أنني أحدد علامة RotateFlag لتحديد ما إذا كان يمكن تدويره في الوقت الحالي ، وهو ما يمنعك من مواكبة النقر السريع. عندما قمت بالضغط ، قمت بتعيين RotateFlag على خطأ ، ثم ضبطت RotateFlag على True بعد انتهاء الرسوم المتحركة ، ولكن يبدو أن التأثير غير واضح. آمل أن يقدم لي الأسياد ذات الصلة بعض النصائح وأن الجميع سيحققون تقدمًا معًا.
ما سبق هو المحتوى الكامل لهذه المقالة. لمزيد من المحتوى ، يرجى الرجوع إلى: ملخص تأثيرات Carousel JavaScript. شكرا لك على قراءتك.