البرنامج المساعد! البرنامج المساعد! أسمع أشخاصًا يطلبون هذا المكون الإضافي وهذا المكون الإضافي كل يوم. بالطبع ، يمكن أن يؤدي استخدام المكونات الإضافية لجهة خارجية إلى تحسين كفاءة التطوير بشكل كبير ، ولكن بصفتي مبتدئًا ، ما زلت أرغب في تنفيذها بنفسي ، ويرجع ذلك أساسًا إلى الوقت!
اليوم سوف أشارككم كيفية كتابة صور Carousels باستخدام JS الأصلي
يمكن لكبار السن تجاهل الهراء التالي:
قبل البدء ، اسمحوا لي أن أتحدث عن تجربتي في تعلم الواجهة الأمامية حتى الآن. يجب أن يكون حوالي شهرين اليوم. يستغرق الأمر من 6 إلى 10 ساعات من وقت الدراسة كل يوم ، والدراسة الذاتية البحتة ، ويقال إن التدريب غير موثوق! أنا أتعلم حاليًا ثلاثة عناصر رئيسية فقط (HTML5 و CSS3 و JavaScript) ، ولا تزال جميع المعرفة الأخرى في المرتبة وراء خطة التعلم ... أنا في فترة من الارتباك ، ولا أعرف ما يجب أن أتعلمه أولاً! بغض النظر عن ماذا ، دعنا فقط نفرز العناصر الرئيسية الثلاثة أولاً. إذا كان لديك أي اقتراحات جيدة ، آمل أن تتمكن من تقديم بعض النصائح!
من HTML5 إلى CSS3 ، شعرت أن الواجهة الأمامية كانت بسيطة للغاية ، لذلك شعرت بالثقة والدوافع. ثم تعلمت JS. اعتدت أن أتعلم C# و Apple's السريع. كلاهما لغات موجهة نحو الكائنات وقوية ، والتي تتطور نسبيا. ومع ذلك ، ما زلت أحب الواجهة الأمامية ، لذلك التفت هنا وبدأت في تعلم JS. كان الأمر سهلاً ، لكنني شعرت أن هذه اللغة كانت فوضوية بعض الشيء وتختلف عن الآخرين! هناك بعض الأشياء التي ليس من السهل فهمها في الدليل الموثوق. إذا لم تتمكن من القيام بذلك ، فما عليك سوى النظر إلى Baidu ونظر أكثر إلى فهم الآخرين لمفاهيم مثل الإغلاق والنماذج الأولية ، ويمكنك إتقانها تدريجياً. في هذه المرحلة ، ربما تكون قد أدركت تدريجياً أن الواجهة الأمامية تتضمن الكثير من الأشياء! هناك مجموعة من مكتبات الطرف الثالث ، والأطر ، وما إلى ذلك ، والعديد من الأشياء الأخرى. باختصار ، تستمر الأسماء الجديدة أمام عينيك. يقول البعض أن هذا سيكون قديمًا وهذا على وشك أن يكون السائد ، وهو فوضوي للغاية! فوضوي جدا! كيف أذهب بعد ذلك؟ ماذا تتعلم أولا؟ ماذا تتعلم لاحقًا؟
أنا حاليا في هذه المرحلة. في بعض الأحيان ، لا يمكنني الوقوف على مشاهدة أي شيء لمدة يومين متتاليين ، ولا أستطيع النوم ، وأشعر بالضيق ، أي أنني مهووس به!
لقد فكرت للتو ، ما هو الخطأ معي؟ لا أستطيع معرفة ذلك! ننسى ذلك ، خذ قسطًا من الراحة وممارسة جسمك! فقط اذهب للركض والتجول حولها! أثناء التفكير: كيف تعيد نفسك إلى الدولة!
في وقت لاحق فعلت هذا: امنح نفسك بعض الحلوى! (اصنع بعض الأمثلة البسيطة بنفسك)
لقد وجدت أن الحلوى حلوة لدرجة أنني أستطيع أن أصنعها بالفعل! الشعور بالإنجاز على مهل والدافع ممتلئ! لقد كتبت للتو حالة واحدة تلو الأخرى. إذا لم أفهم أو لم أكن على دراية بأاجهات واجهة برمجة التطبيقات ، فسوف أقوم بترجمة المستند (سأكتبه بنفسي قبل قراءة رمز الآخرين ، وسأقرأه مرة أخرى إذا لم أستطع ذلك). تدريجيا ، شعرت أنني قد عدت حقا وبدأت في الوصول إلى المسار الصحيح!
كما ألقيت نظرة على نوع الأشخاص الذين تحتاجهم معظم الشركات التي تقوم حاليًا بتوظيف الشركات الأمامية ، ثم وضعت خطة دراسة جديدة لنفسي. بالطبع ، لأن لدي وقت الآن ، أريد أن أستغرق بعض الوقت لتوحيد المؤسسات الرئيسية الثلاث أولاً ، وممارسة المزيد ، ثم العودة وقراءة المستندات مرة أخرى لفهم مبادئها الأساسية والداخلية! بغض النظر عن ما تتعلمه بعد ذلك ، سيكون من الأسهل بكثير البدء! في الوقت نفسه ، استمر في فهم الواجهة الأمامية أكثر! لفهم آفاق هذه المهنة واتجاهها هو إنشاء نظرة عالمية أمامية لنفسك ، حتى لا تفقد اتجاهك عندما تتعلم!
فيما يتعلق بالمكتبات والأطر من الطرف الثالث ، لا أعرف في الوقت الحالي. هل JQ عفا عليها الزمن؟ هل تحتاج إلى التعلم؟ لا أعرف ، لذلك لم أعد أهتم بذلك ، فقط ألعب مع الأصلي أولاً! يجب أن تعرف بشكل طبيعي في المستقبل!
يبدأ القتال الفعلي ، والما يلي هو الكود والتوضيح.
لا أستطيع أن أتعلم طريقة الكتابة الموجهة نحو الكائن لكبار السن في الوقت الحالي ، لذلك يمكنني فقط كتابة بعض الوظائف ، هاها! (الصورة تأتي من الإنترنت. يمكنك أيضًا قطع صورة 300*200 لنفسك لعرض التأثير. انقر فوق الزر "الدرجة والخارج" للبدء)
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </itlem> <style> *{margin: 0 ؛ الحشو: 0 ؛ على غرار القائمة: لا شيء ؛ تدمير النص: لا شيء ؛ } #SLIDE {position: absolute ؛ أعلى: 100px ؛ اليسار: 50 بكسل ؛ العرض: 300 بكسل ؛ الارتفاع: 200 بكسل ؛ الحدود: 1 بكسل رمادي صلب. } #slide .blog-name {display: block ؛ الموقف: مطلق ؛ أسفل: 0 ؛ اليسار: 0 ؛ العرض: 100 ٪ ؛ الارتفاع: 25 بكسل ؛ رفع الخط: 25 بكسل ؛ خلفية اللون: RGBA (155،155،155،0.5) ؛ Z-index: 4 ؛ المؤشر: مؤشر. استولى النص: 3px ؛ } #slide-nav {position: absolute ؛ اليمين: 5px ؛ أسفل: 5 بكسل ؛ Z-index: 5 ؛ } #slide-nav li {display: inline block ؛ العرض: 16 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 16 بكسل ؛ الحدود الحدودية: 5px ؛ المؤشر: مؤشر. الفائض: مخفي. } #slide-nav li: hover ،. selected {background-color: #336699 ؛ اللون: أبيض. . العرض: 300 بكسل ؛ الارتفاع: 200 بكسل ؛ حجم الخط: 0 ؛ . المؤشر: مؤشر. . أعلى: -25 بكسل ؛ حجم الخط: 20 بكسل ؛ } </style> <script> window.onload = function () {var sufuimagescrooller = function () {// العديد من وظائف الأداة show (img) {var id ؛ لـ (var i = 0 ؛ i <= 21 ؛ i ++) {var op = i * 5 ؛ id = setTimeOut (function (e) {setOpacity (img ، e)} .bind (this ، op) ، i * 50) ؛ } clearTimeOut (id) ؛ } دالة إخفاء (img) {var id ؛ لـ (var i = 0 ؛ i <= 21 ؛ i ++) {var op = 100 - i * 5 ؛ id = setTimeOut (function (e) {setOpacity (img ، e)} .bind (this ، op) ، i * 20) ؛ } clearTimeOut (id) ؛ } function getById (id) {return document.getElementById (id) ؛ } وظيفة setOpacity (elem ، المستوى) {if (elem.filter) {elem.style.filter = "alpha (opacity =" + level + ")" ؛ // متوافق مع ie} آخر {elem.style.Opacity = المستوى/100 ؛ }} // (الوضع المتقدم والتقدمي) وظيفة بوالة الجسم inoutModel (nums ، navid ، imgcontainerid ، imginfoid ، تأخير) {// منع عدة نقرات من زر اختيار الوضع لإنشاء المزيد من li إذا (getByid ('slide-nav'). var targetidext = 0 ؛ // حفظ معلومات حالة الصورة var currentidext = 0 ؛ // حفظ معلومات حالة الصورة var frag = document.createdocumentFragment () ؛ لـ (var i = 0 ؛ i <nums ؛ i ++) {nav [i] = fragment.appendChild (document.createElement ('li')) ؛ // ستعود طريقة AppendChild إلى li nav [i] .innerhtml = i+1 ؛ } getByid (navid) .AppendChild (frag) ؛ // تهيئة لعرض الصورة الأولى var imgs = getById (imgContainerId) .getElementsByTagName ('a') ؛ var info = getByid (imginfoid) ؛ info.innerhtml = imgs [0] .title.slice (0،12)+'...' ؛ Nav [0] .className = 'Selection' ؛ . } // ابدأ تلقائيًا carousel var id ؛ وظيفة start (تأخير) {id = setInterval (function () {hide (imgs [cureentidext]) ؛ nav [cureentidext] .className = '' ؛ if (targetidext <nums-1) {targetide ++ ؛ info.innerhtml = imgs [targetidext] .title.slice (0،12)+'...' ؛ } ابدأ (تأخير) ؛ // إضافة حدث لكل زر تنقل لـ (var k = 0 ؛ k <nav.length ؛ k ++) {nav [k] .onclick = function (event) {var e = event || window.event ؛ // متوافق مع ie var t = event.target || event.srcelement ؛ // متوافق مع ie var idex = parseint (t.innerhtml) -1 ؛ console.log ('idex:'+idex+'t:'+targetidext+'c:'+cureEntidext) ؛ if (idex === humen [cureentIdext]) ؛ Nav [cureentIdext] .className = '' ؛ Humenidext = idex ؛ عرض (IMGS [IDEX]) ؛ Nav [idex] .className = 'Selection' ؛ info.innerhtml = imgs [idex] .title.slice (0،12)+'...' ؛ }} getById (navid) .onmouseover = function () {clearinterval (id)} ؛ getByid (navid) .onmouseout = function () {start (delay)} ؛ } // من وظيفة الوضع الأيمن إلى اليسار من RightModel (NUMS ، NAVID ، IMGCONTAINERID ، IMGINFOID ، تأخير) {Alert ('المدون كسول ، نسيت تنفيذ هذه الوظيفة! يرجى ترك رسالة إذا كنت بحاجة إليها!') ؛ } الوظيفة من TopModel (NUMS ، NAVID ، IMGCONTAINERID ، IMGINFOID ، DELAY) {Alert ('Blogger كسول ، نسيت تنفيذ هذه الوظيفة! يرجى ترك رسالة إذا كنت بحاجة إليها! } return {inoutModel: inoutModel ، ofrightModel: ofrightModel ، fromTopModel: fromTopModel: fromTopModel ، getByid: getByid}} () ؛ sufuimagescrooller.getbyid ('model-btn1'). onClick = function () {sufuimagescrooller.inoutmodel (5 ، 'slide-nav' ، 'slide-main' ، 'slide-info' ، 3500) ؛ } ؛ sufuimagescrooller.getbyid ('model-btn2'). onClick = function () {sufuimagescrooller.fromrightmodel (5 ، 'slide-nav' ، 'slide-main' ، 'slide-info' ، 3500) ؛ } ؛ sufuimagescrooller.getbyid ('model-btn3'). onClick = function () {sufuimagescrooller.fromtopmodel (5 ، 'slide-nav' ، 'slide-main' ، 'slide-info' ، 3500) ؛ } ؛ } ؛ </script> </head> <body> <div id = "slide"> <a id = "slide-info" href = "http://www.cnblogs.com/susufufu/" target = "_ blank"> sufu's </a> <ul id = "slide-nav" href = "http://www.cnblogs.com/susufufu/p/5749922.html" target = "_ blank"> <iv> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=1247027539،1217965501&fm=21&gp=0.jpg">/div> href = "http://www.cnblogs.com/susufufu/p/5768431.html" target = "_ blank"> <iv> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=4286855119،2694540617&fm=21&gp=0.jpg">/div> href = "http://www.cnblogs.com/susufufu/p/5738673.html" target = "_ blank"> <iv> <img src = "https://ss.bdstatic.com/70cfv8sh_q1ynxgkpowk1hf6hhy/it/u=4042865154،1782505495&fm=21&gp=0.jpg">/div> href = "http://www.cnblogs.com/susufufu/p/5714020.html" target = "_ blank"> <iv> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=2603911195،1920098549&fm=21&gp=0.jpg"> </div> href = "http://www.cnblogs.com/susufufu/p/5759480.html" target = "_ blank"> <iv> <img src = "https://ss0.bdstatic.com/70cfuhsh_q1ynxgkpowk1hf6hhy/it/u=4104312586،1589909074&fm=21&gp=0. id = "model-btn1" value = "التدريجي التقدمي"> <إدخال type = "button" id = "model-btn2" value = "right to left"> <inputفي البداية ، فكر في كيفية تنفيذها: ألا تستخدم الموقت فقط لتغيير الصورة وتغيير عتامة الصورة في Cutstone؟
1. تخطيط HTML بسيط نسبيًا:
<ul id = "slide-nav"> </ul> <div id = "slide-main"> <a href = "" target = "_ blank"> <viv> <img src = "lg1.png"> </iv> </a> ... </viv> ...
يتم استخدام Slide-Info لعرض عنوان الصورة. Slide-Nav عبارة عن زر رقمي ، Slide-Main عبارة عن حاوية صور ، ويتم وضع رابط الصورة في الداخل.
لا يوجد LI مكتوب في العلامة لأنه يتم إنشاؤه ديناميكيًا من خلال JS ؛
2. طالما واجهت إعدادات أنماط CSS ، سوف تفهمها. انتبه إليهم:
• قبل أن تقوم بتخطيطك الخاص ، من الأفضل إضافة حدود إلى العنصر الأصل ، حتى تتمكن من فهم المشهد وإزالته أخيرًا.
• ul li والعديد من العلامات الأخرى لها حشوة افتراضيًا ، ويجب ضبطها على 0 ؛
*{الهامش: 0 ؛ الحشو: 0 ؛ على غرار القائمة: لا شيء ؛ تدمير النص: لا شيء ؛ }الارتفاع: 25 بكسل ؛ وخطي الارتفاع: 25 بكسل ؛ اثنان متساويان ، بحيث يمكن توسيط الشخصيات
Z-Index هو فقط بالنسبة لإخوانك وأطفالك ، وهو غير صالح للأقارب على الهامش. إذا كنت تريد عرضها أمام الأقارب على الهامش ، فقم بإعداد أسلاف الأقارب في الخطوط الجانبية. على سبيل المثال ، جدك هو رئيس الوزراء وسيدك الثاني هو مزارع ، ثم جميع هويات عائلتك أكثر نبيلة من جميع هويات عائلة سيدك الثاني.
• الموقف: مطلق ، يرتبط أيضًا بوالده. إذا لم يحدد والده موقعًا ، فسيكون غير موثوق به ، لذا استمر في البحث عن الدعم حتى يجده ، ثم يعتمد عليه لوضعه!
• إذا كنت ترغب في تحقيق التأثير من اليمين إلى اليسار ، تذكر حجم الخط: 0 ؛ كن واضحًا بشأن التباعد بين الصور واترك الصور جنبًا إلى جنب!
كما يقول المثل ، الممارسة تجعل الكمال. فقط عندما تكون CSS صلبة يمكنك التحكم في التصميم! على سبيل المثال ، يمكن تحقيق تخطيط الجناح المزدوج التالي دون تحديد المواقع:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> body {margin: 0 ؛ الحشو: 0 ؛ } .header ، .footer {width: 100 ٪ ؛ الارتفاع: 50 بكسل ؛ ارتفاع الخط: 50 بكسل ؛ محاذاة النص: المركز ؛ خلفية اللون: Greenyellow ؛ } .Container {Overflow: Hidden ؛ *التكبير: 1 ؛ } .left {float: left ؛ العرض: 100px ؛ الارتفاع: 100px ؛ الهامش اليساري: -100 ٪ ؛ خلفية اللون: الأخضر. } .main {float: Left ؛ العرض: 100 ٪ ؛ الارتفاع: 100px ؛ لون الخلفية: رمادي. } .right {float: Left ؛ العرض: 200 بكسل ؛ الارتفاع: 100px ؛ الهامش اليساري: -200px ؛ خلفية اللون: الذهب. } .center {padding-left: 100px ؛ حشو اليمين: 200 بكسل ؛ } </style> </head> <body> <viv> header </viv> <viv> <viv> مركز رئيسي </div> </viv> <div> اليسار </div> <div> يمين </div> </div> volour </viv> </body> </html>تنفيذ الكود
اكتب الخطوط العريضة أولاً:
var sufuimagescrooller = function () {function getById (id) {...} // Universal get element comfort function setOpacity (elem ، level) {... } // إرجاع جسم الوظيفة الرئيسية {inoutModel: inoutModel ، ...}} () ؛وبهذه الطريقة ، يمكنك استدعاء طريقة InoutModel من خلال SufuimagesCrooller ، SufuimagesCrooller. inoutModel (5 ، 'slide-nav' ، 'slide-main' ، 'slide-info' ، 3500) ؛
inoutModel (NUMS ، NAVID ، IMGCONTAINERID ، IMGINFOID ، DELADE): يقوم NUMS بإنشاء عدد LI ، والذي يجب أن يتوافق مع عدد الصور ، معرف حاوية الأزرار الرقمية NAVID ، IMGCONTAINERID PICTION ID ID ، يعرض IMGINFOID معرف معلومات عنوان الصورة ، ويحدد التأخير وقت التأخير ؛
بعد كتابة المخطط التفصيلي ، تم الانتهاء من نصفه. الآخرون هم تنفيذ تفاصيل محددة. لم أكتب جيدًا. لا أستطيع إلا أن أقول إنني قمت بتنفيذ هذه الوظيفة. الجميع يفكر في ذلك بأنفسهم. إذا كان لديك أي اقتراحات جيدة ، فلا تتردد في تقديمها ؛
ابدأ بالقطع في وظيفة inoutModel ثم انطلق بشكل أعمق خطوة بخطوة. المفتاح هو كتابةها يدويًا. إذا نظرت إليها فقط ، فلن تكون لديك هذه التجربة العميقة!
حسنًا ، هذه هي النقطة. إذا كنت لا تعرف كيفية ترجمة واجهة برمجة تطبيقات المستند بنفسك ، فيمكنك أيضًا ترك رسالة لتسألني
المقال أعلاه "الشعور بتحقيق تأثيرات الكاروسيل من JS + Native Learning الواجهة الأمامية (منع الهوس) هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من تقديم مرجع لك وآمل أن تتمكن من دعم Wulin.com أكثر.