جافا سكريبت عرض الشرائح مع وظائف

• قد 4, 2024

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

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

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

وظيفة العرضالكبير (المعرف) {
// تغيير الصورة الكبيرة
imageName = id + ".jpg"؛
document.getElementById ( "largeImage") SRC = imageName؛
// عيّن نمط الصورة المصغرة السابقة مرة أخرى إلى الافتراضي
. document.getElementById ( "الحالي") معرف = oldID.
// قم بتدوين الرقم قبل أن نغيره
oldID = معرف
/ / ضع علامة على الصورة المصغرة كتيار حالي مع النمط الحالي
document.getElementById (معرف) .id = "التيار".
}

ولكي تعمل هذه الوظيفة في المرة الأولى ، كان علي أيضًا تقديم تعريف مبدئي لـ oldID، المتغير الذي أستخدمه لتذكر المعرف الأصلي للمصغر المحدد حاليًا. ينتقل كل هذا الرمز في القسم الرئيسي لصفحة الويب ، بحيث يتم تحميله قبل تحميل الصفحة.

أخيرًا ، قمت بتغيير HTML للصور المصغرة لاستدعاء وظيفتي. يشبه HTML لعرض الشرائح الآن ما يلي:











يمكنك الاطلاع على مثال عملي لهذا الرمز هنا.

تعليمات الفيديو: Slideshow Fade كيفية انشاء من الصفر (قد 2024).