بعد ذلك، سأبدأ الجزء الأساسي، وهو كتابة برنامج جافا سكريبت. فكرتنا هي أنه يمكننا تحديد مجموعة من الصور (عدة صور). عند ظهور الصفحة، سيتم عرض الصورة الأولى أولاً وسيتم تحميل الصورة الثانية مسبقًا بعد 5 ثوانٍ من تحميل الصورة الأولى، إذا كانت الصورة الثانية يتم أيضًا تحميل الصورة، ونبدأ في التبديل تلقائيًا إلى الصورة الثانية، وفي هذا الوقت، يتم تحميل الصورة الثالثة مسبقًا في غضون 5 ثوانٍ، وسوف ننتقل تلقائيًا إلى الصورة الثالثة، ويستمر التشغيل حتى يبدأ الأخير من البداية مرة أخرى. وبطبيعة الحال، يتم تشغيل هذا تلقائيا. نسمح أيضًا للمستخدمين باللعب يدويًا للأمام وللخلف.
بادئ ذي بدء، المشكلة التي يتعين علينا حلها هي التحميل المسبق للصور، لأن هذا يحدد سلاسة عملية التبديل وكمال عملية التشغيل. من السهل جدًا تحميل الصورة مسبقًا، كل ما نحتاجه هو إنشاء متغير مثيل جديد للصورة في الذاكرة وتوجيه المتغير إلى الصورة التحميل المسبق. يبدو مكتوبًا بلغة جافا سكريبت كما يلي:
var myImage = new Image()
myImage.src = "someImage.gif"
إذًا، نحتاج أيضًا إلى معرفة ما إذا كانت الصورة قد تم تحميلها؟ إذا تم تحميله، فسنعرضه، وإذا لم يتم تحميله، فسيحدث خطأ. لذلك يتعين علينا تغيير الكود أعلاه وإضافة عبارتين، بحيث تصبح JavaScript كما يلي:
var img = new Image()
img.onload = doReadyImage
img.onerror = doErrorDisplay
img.src = "someImage.gif"
أضفنا حدثي onload وonerror للصورة، اللذين يمثلان ما إذا كان سيتم التحميل المسبق وأحداث الخطأ التحميل المسبق على التوالي. يجب أن تكون هاتان الجملتان أمام عبارة img.src. وإلا فإن التحميل المسبق للصورة سوف يحدث بشكل خاطئ.
الخطوة الأخيرة هي برنامج تبديل الصور الخاص بنا، لقد قمنا سابقًا بمراجعة التأثيرات المختلفة لمرشحات تحويل المرشحات في CSS، وهنا نستخدم التأثير العشوائي الذي يحمل الاسم الرمزي 23. وفيما يلي ما كتبناه لهذا التأثير في برنامج JavaScript:
if (document. الصور. عرض الشرائح. المرشحات)
{
document.images.slideShow.filters[0].Stop()
document.images.slideShow.filters[0].Apply()
// استخدم تأثير الانتقال العشوائي document.images.slideShow.filters.revealTrans.transition=23
}
document.images.slideShow.src = sSource
// ابدأ في تنفيذ تأثير التحويل
إذا (document.images.slideShow.filters)
document.images.slideShow.filters[0].Play()