لا تزال مخططات Carousel شائعة نسبيًا في التطبيقات المستقبلية ويمكن تنفيذها دون الكثير من الكود. ولكن إذا كنت تتقن المعرفة الأساسية لـ JS فقط ، فكيف يمكنك استخدام طرق منطقية أقل وبسيطة لتحقيق ذلك؟ فيما يلي بعض الممارسات المختلفة:
1. استخدام طريقة الإزاحة لتحقيق
أولاً ، يمكننا إضافة DIV إلى الجسم وتعيين العرض على نسبة مئوية (صفحة تكيفية). إذا كانت النسبة خاصةً بنسبة مئوية بالنسبة لها ، فسنقوم بذلك وفقًا للاحتياجات. لن أقول الكثير هنا. ضع الصورة في Div.
ثانياً ، يضبط جزء النمط جميع علامات IMG على المطلقة لتسهيل تحديد المواقع
أخيرًا ، يتحدث جزء JS عن المنطق ، وتحديد صفيفتين فارغتين. يتم استخدام الصفيف الأول لحفظ الصورة الأولية المعروضة على الصفحة والصورة في انتظار الدخول ، ويقوم المصفوفة الثانية بحفظ الصور المتبقية. افترض أن هاتين المصفوفتين يتم تعيينهما على: waittoshow = [] ؛ و goout = [] ؛ waittoshow.shift () ؛ إذا تم تسمية الصورة الأولى showfirst ، وتم تعيين وقت النزوح والحركة لصورة showfirst. بعد الانتهاء من التنفيذ ، ضع showfirst في ذيل goout: goout.push (showfirst) ؛ في هذا الوقت ، يصبح العنصر 0 من صفيف Waittoshow هو الصورة الثانية الأصلية التي سيتم عرضها. قم بتعيين وقت الإزاحة والحركة لهذه الصورة Waittoshow [0] ، وقم بإعداد صورة العنصر الأول لمصفوفة GOOUT ووضعها في ذيل مجموعة Waittoshow للتأكد من أن صفيف Waittoshow هو دائمًا صورة معروضة والصورة التي سيتم عرضها. وبهذه الطريقة ، تشكل المصفوفتان حلقة لإكمال تنفيذ صورة carousel. المنطق العكسي هو نفسه (لأن المنطق معقد للغاية ، لا ينصح به هنا)
2. طريقة استخدام مستوى التسلسل الهرمي لتغيير الصورة العليا (لا تحتوي هذه الطريقة على إجراءات إزاحة ، لكن المنطق بسيط للغاية وعملي)
إنه أكثر سهولة في التعليمات البرمجية مباشرة: في الأساس كل سطر لديه تعليقات
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> مخطط carousel (فلاش Adaptive) </title> <style media = "screen">* {margin: 0 ؛ pad: 0 ؛ absolute ؛/*z-index: 10 ؛*/} الإدخال {الحدود: 1px lightgray الصلبة ؛ العرض: 50px ؛ الارتفاع: 30px ؛ الخلفية: أحمر ؛ الحدود-radius: 5px ؛ font-size: 20px ؛ /> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> </div> <input type = "button" id = "butleft" name = "name" value = "◀︎" احصل على عنصر الصور لإنشاء مجموعة سلسلة. لا يمكن لصفيف السلسلة أن يقوموا بإجراء لصق Push Pop أو عمليات أخرى // لذلك يحتاج إلى استراح قيمته في صفيف ، مع تعريف VAR بعد ذلك الصور = document.getElementsByTagName ('img') ؛ var butleft = document.getElementByid ('butleft') = 1000 ؛ // احصل على صفيف فارغ لتخزين عناصر السلسلة في الصور VAR Images = [] هم. كلما زادت الصورة ، كلما ارتفعت إعداد المستوى ، حتى تكون الصور من الصور الأولى والثانية بالترتيب ... لأسفل في تسلسل CurrentImage.style.zindex = -i ؛} // قم بتعيين عدد العدادات ، وتنفيذ حدث نقرة (يسار أو يمينًا) = ImageS.shift () ؛ // قم بتعيين مستوى لعنصر الصورة المظهر ، أي -1000 + عدد ، // جعل المستوى الأصغر مقارنةً بالعناصر الأخرى ، سيتم عرض الصورة على رأس الصفيف في الجزء السفلي من showfirst.style.zindex = - index + cut إضافة 1 ، لا تفكر في القيمة المحددة ، ما عليك سوى النقر فوق الحدث بالإضافة إلى 1 count ++ ؛} // انقر فوق الحدث إلى butright.onclick الأيمن = function () {// prope eled من ذيل الصور وتعيينه إلى showfirstvar showfirst = shiveess.pop () ؛ // تعيين مستوى العرض إلى الحد الأقصى ، 1000+ showfirst.style.zindex = index+count ؛ // بعد تغيير المستوى ، أدخله في رأس صفيف الصور.إن المقالة التي يجب قراءتها أعلاه على JS الأساسية (التنفيذ البسيط لـ Click Event Carousel) هي كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.