الإعلانات

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

اليوم سأعرض لك كيفية إنشاء عرض شرائح JavaScript من البداية. دعنا نقفز مباشرة!

المتطلبات الأساسية

ستحتاج إلى معرفة بعض الأشياء قبل البدء في الترميز. إلى جانب متصفح ويب ومحرر نص مناسب من اختيارك (أوصي نص سامية) ، ستحتاج إلى بعض الخبرة مع لغة البرمجة, CSS, جافا سكريبتو مسج.

إذا لم تكن واثقًا من مهاراتك ، فتأكد من قراءة دليلنا إلى باستخدام نموذج كائن المستند جافا سكريبت وتطوير الويب: استخدام نموذج كائن المستندستعرض هذه المقالة على الهيكل العظمي للمستند الذي يعمل معه JavaScript. امتلاك معرفة عملية بنموذج كائن المستند الملخص ، يمكنك كتابة JavaScript الذي يعمل على أي صفحة ويب. اقرأ أكثر و هؤلاء نصائح لتعلم CSS 5 خطوات للأطفال لتعلم CSS وتصبح ساحرة CSS للركلةCSS هي أهم صفحات التغيير التي شاهدتها صفحات الويب في العقد الماضي ، وقد مهدت الطريق لفصل الأسلوب والمحتوى. في الطريقة الحديثة ، XHTML يحدد البنية الدلالية ... اقرأ أكثر

. إذا كنت واثقًا من جافا سكريبت ولكنك لم تستخدم jQuery من قبل ، فقم بمراجعة موقعنا دليل أساسي ل jQuery دليل أساسي ل JQuery لمبرمجي جافا سكريبتإذا كنت مبرمج Javascript ، فإن هذا الدليل إلى JQuery سوف يساعدك على بدء الترميز مثل النينجا. اقرأ أكثر .

1. ابدء

يتطلب عرض الشرائح هذا العديد من الميزات:

  1. دعم للصور
  2. ضوابط لتغيير الصور
  3. شرح النص
  4. الوضع التلقائي

يبدو قائمة بسيطة من الميزات. سيقوم الوضع التلقائي تلقائيًا بنقل الصور إلى الصورة التالية في التسلسل. إليكم الرسم التقريبي الذي قمت به قبل كتابة أي كود:

تخطيط الكود

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

إليك HTML الأولي الذي تحتاجه للبدء. احفظ هذا في ملف باسم مناسب ، مثل index.html و:

MUO عرض الشرائح
طاحونة هوائية
نبات
الكلب

إليك ما يشبه الرمز:

البرنامج التعليمي صفحة ويب الأولية

انها القمامة قليلا أليس كذلك؟ دعنا نقسمها قبل تحسينها.

هذا الكود يحتوي على "قياسي" لغة البرمجة, رئيس, أسلوب, النصيو الجسم العلامات. هذه الأجزاء هي مكونات أساسية في أي موقع. مسج يتم تضمينها عبر جوجل CDN - لا شيء فريد أو خاص حتى الآن.

داخل الجسم هو div مع معرف showContainer. هذا غلاف أو حاوية خارجية لتخزين عرض الشرائح. ستحسن ذلك لاحقًا باستخدام CSS. داخل هذه الحاوية ، هناك ثلاث كتل من التعليمات البرمجية ، لكل منها غرض مماثل.

يتم تعريف فئة الأصل باسم فئة imageContainer:

يستخدم هذا لتخزين شريحة واحدة - يتم تخزين الصورة والتعليق عليها داخل هذه الحاوية. كل حاوية لها معرف فريد ، يتكون من الأحرف انا_ وعدد. كل حاوية لها رقم مختلف ، من واحد إلى ثلاثة.

كخطوة أخيرة ، يتم الرجوع إلى صورة ، ويتم تخزين التسمية التوضيحية داخل div مع شرح صف دراسي:

الكلب.

لقد أنشأت صوري بأسماء ملفات رقمية ، وقمت بتخزينها داخل مجلد يسمى صور. يمكنك الاتصال بأي شيء تريده ، شريطة تحديث HTML لتطابقه.

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

أخيرًا ، يتم إنشاء أزرار التنقل. هذه تتيح للمستخدم التنقل عبر الصور:

هؤلاء كيان HTML تستخدم الرموز لعرض الأسهم للأمام وللخلف بطريقة مشابهة كيف تعمل أيقونة الخطوط أيقونة الخطوط رائعة لموقعك: وإليك لماذااليوم سأريك ما هي خطوط الرموز وكيف يمكنك استخدامها لتنشيط موقع الويب الخاص بك. اقرأ أكثر .

2. المغلق

الآن وقد أصبح الهيكل الأساسي في مكانه ، فقد حان الوقت لجعله يبدو جميلة. إليك الشكل الذي ستبدو عليه بعد هذا الرمز الجديد:

عرض الشرائح تعليمي أول المغلق

أضف هذا المغلق الخاص بك أسلوب علامات:

html {font-family: helvetica، arial؛ } #showContainer {/ * المجمع الرئيسي لجميع الصور * / العرض: 670 بكسل ؛ الحشو: 0؛ الهامش: 0 السيارات ؛ إخفاء الفائض؛ الموقف: نسبي } .navButton {/ * اجعل الأزرار تبدو جميلة * / cursor: pointer؛ تعويم: اليسار؛ العرض: 25 بكسل ؛ الارتفاع: 22 بكسل ؛ الحشو: 10px. الهامش الأيمن: 5 بكسل ؛ إخفاء الفائض؛ محاذاة النص: المركز ؛ اللون الابيض؛ وزن الخط: غامق ؛ حجم الخط: 18 بكسل ؛ الخلفية: # 000000؛ التعتيم: 0.65 ؛ اختيار المستخدم: لا شيء ؛ } .navButton: hover {opacity: 1؛ } .caption {float: right؛ } .imageContainer: not (: first-child) {/ * إخفاء جميع الصور ما عدا الأول * / display: none؛ }

هذا يبدو أفضل بكثير الآن أليس كذلك؟ دعنا نلقي نظرة على الكود.

أنا أستخدم صور عينة كلها 670 × 503 بكسل، لذلك تم تصميم عرض الشرائح هذا في الغالب حول صور بهذا الحجم. ستحتاج إلى ضبط CSS بشكل مناسب إذا كنت ترغب في استخدام صور بحجم مختلف. أنصحك بتغيير حجم الصور إلى أحجام مطابقة - الصور المختلفة ذات الأبعاد المختلفة سوف تسبب مشاكل في التصميم.

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

  1. المؤشر: المؤشر - يؤدي هذا إلى تغيير المؤشر من سهم إلى إصبع تأشير عند تحريك المؤشر فوق الأزرار.
  2. التعتيم: 0.65 - هذا يزيد من شفافية الأزرار.
  3. اختيار المستخدم: لا شيء - هذا يضمن أنك لا تستطيع تسليط الضوء على النص على الأزرار عن طريق الخطأ.

يمكنك رؤية نتيجة معظم هذا الرمز في الأزرار:

زر تعليمي تأثير تحوم

الجزء الأكثر تعقيدًا هنا هو خط المظهر الغريب:

.imageContainer: not (: first-child) {

قد تبدو غير عادية تمامًا ، إلا أنها تفسر نفسها إلى حد ما.

أولا ، أنه يستهدف أي عناصر مع imageContainer صف دراسي. ال :ليس() ينص بناء الجملة على أن أي عناصر داخل الأقواس يجب أن تكون مستبعد من هذا النمط. وأخيرا، فإن : أول طفل ينص بناء الجملة على أن CSS يجب أن يستهدف أي عنصر مطابق للاسم لكن تجاهل العنصر الأول. السبب في ذلك بسيط. نظرًا لأن هذا عبارة عن عرض شرائح ، فلا يلزم سوى صورة واحدة في كل مرة. يخفي هذا CSS كل الصور بصرف النظر عن الصورة الأولى.

3. جافا سكريبت

الجزء الأخير من اللغز هو JavaScript. هذا هو المنطق لجعل عمل الشرائح يعمل بشكل صحيح.

أضف هذا الرمز إلى النصي بطاقة شعار:

$ (document) .ready (function () {$ ('# previous'). on ('click'، function () {// Change to the image السابقة $ ('# im_' + currentImage) .stop (). fadeOut (1) ؛ decreaseImage ()؛ $ ('# im_' + currentImage) .stop (). fadeIn (1)؛ }); $ ('# next'). on ('click'، function () {// Change to the next image $ ('# im_' + currentImage) .stop (). fadeOut (1)؛ increaseImage ()؛ $ ('# im_' + currentImage) .stop (). fadeIn (1)؛ }); var currentImage = 1؛ var totalImages = 3؛ وظيفة زيادةImage () {/ * زيادة currentImage بنسبة 1. * إعادة تعيين إلى 1 إذا كان أكبر من totalImages * / ++ currentImage ؛ إذا كان (currentImage> totalImages) {currentImage = 1؛ }} دالة تقليلImage () {/ * إنقاص currentImage بمقدار 1. * يعيد إلى totalImages إذا كان أصغر من 1 * / --currentImage ؛ إذا كان (currentImage <1) {currentImage = totalImages؛ } } });

قد يبدو الأمر غير بديهي ، لكنني سأتخطى الكتل الأولية من الشفرة ، وأقفز مباشرة لشرح الكود من منتصف الطريق - لا تقلق ، أشرح لك الشفرة بأكملها!

تحتاج إلى تحديد اثنين من المتغيرات. (هنا كيفية تحديد المتغيرات في جافا سكريبت.) هذه المتغيرات يمكن اعتبارها متغيرات التكوين الرئيسية لعرض الشرائح:

var currentImage = 1؛ var totalImages = 3؛

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

وظائف اثنين increaseImage و decreaseImage تقدم أو تراجع الصورة الحالية متغير. يجب أن يكون هذا المتغير أقل من واحد ، أو أعلى من totalImages، فإنه يحصل على إعادة تعيين إلى واحد أو totalImages. هذا يضمن أن عرض الشرائح سيعقد بمجرد وصوله إلى النهاية.

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

ال قف() بنيت طريقة في مسج. هذا يلغي أي أحداث معلقة. يضمن ذلك بسلاسة الضغط على كل زر ، ويعني أنه لا يوجد لديك 100 زر تضغط جميعها في انتظار التنفيذ إذا كنت تشعر بالجنون قليلاً على الماوس. ال fadeIn (1) و fadeOut (1) طرق تتلاشى داخل أو خارج الصور كما هو مطلوب. يحدد الرقم مدة الخبو بالميلي ثانية. حاول تغيير هذا إلى عدد أكبر مثل 500. ينتج رقم أكبر وقت انتقال أطول. على الرغم من ذلك ، فقد تذهب بعيدًا ، وقد تبدأ في رؤية أحداث غريبة أو "وميض" بين تغييرات الصورة. إليك عرض الشرائح قيد التنفيذ:

مثال عرض الشرائح التعليمي

تقدم تلقائي

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

هذه مهمة سهلة مع jQuery. يجب إنشاء مؤقت لتنفيذ التعليمات البرمجية الخاصة بك كل X ثواني. ولكن بدلاً من كتابة رمز جديد ، فإن أسهل ما يمكنك فعله هو محاكاة "النقر" على زر الصورة التالية ، والسماح للرمز الموجود بالقيام بكل العمل.

إليك جافا سكريبت الجديدة التي تحتاجها - أضف هذا بعد decreaseImage وظيفة:

window.setInterval (function () {$ ('# previous'). click ()؛ }, 2500);

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

إذا كنت مستعدًا لتحدي جافا سكريبت التالي ، فحاول إنشاء موقع ويب باستخدام أداة إنشاء مواقع ويب ثابتة مثل GatsbyJS. إذا كنت متعلمًا من روبي ، فإن Jekyll هو أيضًا خيار. من هنا كيف جيكيل و GatsbyJS الأجرة ضد بعضها البعض جيكيل vs. GatsbyJS: ما هو موقع البناء الثابت الذي يبني أفضل موقع؟تحتاج إلى موقع على شبكة الإنترنت دون ديناميكية قاعدة البيانات؟ استخدم أداة إنشاء مواقع ويب ثابتة مثل Jekyll أو GatsbyJS للحفاظ على الأمور بسيطة. اقرأ أكثر .

الصورة الائتمان: ثارات Sardsri عبر Shutterstock.com

تخرج جو في علوم الكمبيوتر من جامعة لينكولن بالمملكة المتحدة. إنه مطور برامج محترف ، وعندما لا يطير بطائرات بدون طيار ولا يكتب موسيقى ، يمكن العثور عليه في كثير من الأحيان يلتقط صوراً أو ينتج مقاطع فيديو.