كيفية إنشاء عرض شرائح JavaScript في 3 خطوات سهلة

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

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

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

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

إذا لم تكن واثقًا جدًا من مهاراتك ، فتأكد من قراءة دليلنا لاستخدام نموذج كائن المستند وهذه النصائح لتعلم CSS. إذا كنت واثقًا من استخدام JavaScript ولكنك لم تستخدم jQuery من قبل ، فراجع دليلنا الأساسي لـ jQuery.

1. البدء

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

دعم للصور
ضوابط لتغيير الصور
تعليق نصي
الوضع التلقائي

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

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

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

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

هذا ما يبدو عليه الرمز:

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

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

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

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

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

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

Dog

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

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

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

 ❮  
 ❯

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

2. CSS

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

أضف CSS هذا بين ملف نمط العلامات:

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

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

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

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

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

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

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

.imageContainer:not(:first-child) {

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

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

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

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

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

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous 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;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

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

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

var currentImage = 1;  
var totalImages = 3;

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

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

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

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

التقدم التلقائي

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

كيفية الترقية إلى Kodi 17 على firestick

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

إليك JavaScript الجديد الذي تحتاجه - أضف هذا بعد ملف تقليل الصورة وظيفة:

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

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

إذا كنت مستعدًا لتحدي JavaScript التالي ، فحاول إنشاء موقع ويب باستخدام أداة إنشاء مواقع ويب ثابتة مثل GatsbyJS ، أو إطار عمل أمامي مثل Vue. إذا كنت متعلمًا في Ruby ، فإن Jekyll يعد أيضًا خيارًا. إليك كيف يتعامل كل من Jekyll و GatsbyJS مع بعضهما البعض.

حقوق الصورة: ثارانات ساردسري عبر موقع Shutterstock.com

يشارك يشارك سقسقة بريد الالكتروني أفضل 8 مواقع لتنزيل الكتب الصوتية مجانًا

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

اقرأ التالي مواضيع ذات صلة

برمجة
جافا سكريبت
تصميم المواقع

نبذة عن الكاتب جو كوبورن(تم نشر 136 مقالاً)

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

المزيد من Joe Coburn

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك