من خلال النظر إلى الكود الذي قدمته، يظهر أن لديك عرض صور بواسطة JavaScript يعمل على تغيير الصورة تلقائيًا بعد فترة زمنية محددة. ومن خلال توجيه المؤشر فوق الصورة، يتم تشغيل العرض التلقائي.
لكن، وفقًا للمشكلة التي واجهتك، يبدو أن هناك مشكلة في زيادة سرعة التبديل عند تحريك المؤشر فوق الصورة مرة أخرى.
لحل هذه المشكلة، يمكنك استخدام دالة clearInterval لإيقاف العرض التلقائي عندما يتم التحكم بالمؤشر. يمكنك تعديل الكود كما يلي:
html<html>
<head>head>
<body>
<script type="text/javascript">
var Image = new Array("Image/welcome.png", "Image/To.png", "Image/My.png", "Image/WepPage.png", "Image/inphp.png");
var Image_Number = 0;
var Image_Length = Image.length;
var intervalId; // تعريف متغير لتخزين رقم التكرار الزمني
function change_image(num) {
Image_Number = Image_Number + num;
if (Image_Number >= Image_Length) // تم تغيير ">" إلى ">=" لتجنب مشكلة الفهرس
Image_Number = 0;
document.slideshow.src = Image[Image_Number];
return false;
}
function auto() {
intervalId = setInterval(function() {
change_image(1);
}, 1000);
}
function stopAuto() {
clearInterval(intervalId); // إيقاف العرض التلقائي
}
script>
<img src="Image/Welcome.png" name="slideshow" onmouseover="auto()" onmouseout="stopAuto()" />
body>
html>
تمت إضافة دالة stopAuto لإيقاف العرض التلقائي عندما يتم إزالة المؤشر من فوق الصورة. يتم ذلك باستدعاء clearInterval وتمريرها برقم التكرار الزمني الذي تم إرجاعه عند استخدام setInterval.
المزيد من المعلومات
بالطبع، دعنا نستكمل التحليل ونضيف بعض المعلومات الإضافية لفهم أفضل حول الكود.
الكود الذي قدمته يقوم بتشغيل عرض الشرائح التلقائي باستخدام لغة JavaScript. إليك بعض النقاط الرئيسية في الكود:
-
الصور المستخدمة:
يتم تحديد مصفوفةImageالتي تحتوي على مسارات الصور التي ستظهر في عرض الشرائح. يمكنك تعديل هذه المصفوفة وإضافة أو إزالة مسارات الصور حسب رغبتك. -
التوقيت:
تم تعيين فترة زمنية باستخدامsetIntervalلتغيير الصورة كل 1000 مللي ثانية (وهو ما يعادل ثانية واحدة). يمكنك تعديل هذا الرقم وتغيير سرعة عرض الشرائح حسب احتياجاتك. -
المشكلة المحتملة:
وفقًا للمشكلة التي واجهتك، يبدو أن هناك خللا في توقيت العرض عند تحريك المؤشر. تم حل هذه المشكلة في الكود المعدل باستخدام دالةclearIntervalلإيقاف التبديل التلقائي عند تحريك المؤشر. -
الأحداث (Events):
يتم استخدام حدثonmouseoverلتشغيل العرض التلقائي عندما يتم تحريك المؤشر فوق الصورة، وحدثonmouseoutلإيقاف العرض عندما يتم إزالة المؤشر من فوق الصورة. -
التسميات (Labels):
يتم استخدام تسميةslideshowللصورة (document.slideshow.srcلتحديد الصورة الحالية.
بهذه الطريقة، يمكنك تحسين وتخصيص عرض الشرائح وفقًا لاحتياجاتك.
