كيفية عمل تنقل بين الصور بإستخدام Timer

لاحظ في الـ Console يظهر لك يخبربك أن undefined لا يحتوي على الخاصية style، بمعنى آخر لم يتم إيجاد العناصر .mySlides ويتم إعتبار المتغير slides يساوي undefined وهذا الأمر يسبب في تعطل الكود كما هو واضح. سبب هذه المشكلة هو أن كود JavaScript يتم تنفيذه قبل تحميل الصفحة حيث قمت بوضع ملف js.js في عنصر head بينما ينصح دائمًا أن تقوم بإضافته قبل نهاية العنصر body، وبالتالي يتم تنفيذ كود JavaScript عندما يتم تحميل الصفحة بالكامل (بالطبع توجد أستثناءات لهذه القاعدة).

	<!-- نقوم بوضع السكريبت قبل نهاية جسم الصفحة -->
	<script src="js/js.js"></script>
</body>
</html>

الأمر الثاني هو في خصائص CSS نفسها، لاحظ أنك عندما تضغط على أزرار التنقل لن سوف تظهر الصور لبرهة ثم تختفي ثانية، وإذا قمت بفحص الصورة، ستجد أنه تتم إضافة الخاصية display: block بشكل صحيح (من خلال كود الجافاسكريبت)، لكن ستجد أيضًا أنه يتم تطبيق الخاصية opacity: 0 مما يؤدي إلى إختفاء الصورة (المحدد .fade:not(.show)) (أحد خصائص Bootstrap)، ولحل هذه المشكلة يجب أن يتم إضافة الصنف show للصورة التي يجب إظهاراها، لذلك سوف نقوم بتعديل كود JavaScript لكي يتم إضافة الصنف show كالتالي:

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = slides.length }
  
  
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; // إخفاء كامل الشرائح
        // حذف الصنف show من كل الصور
        slides[i].classList.remove('show');
    }
    slides[slideIndex - 1].style.display = "block"; // تعديل تنسيق الشريحة المفعلة
    slides[slideIndex - 1].classList.add('show');	// إضافة الصنف show إلى الصورة التي يجب إظهارها فقط
}

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

بتاريخ 21 ساعات قال سامح أشرف:

لاحظ في الـ Console يظهر لك يخبربك أن undefined لا يحتوي على الخاصية style، بمعنى آخر لم يتم إيجاد العناصر .mySlides ويتم إعتبار المتغير slides يساوي undefined وهذا الأمر يسبب في تعطل الكود كما هو واضح. سبب هذه المشكلة هو أن كود JavaScript يتم تنفيذه قبل تحميل الصفحة حيث قمت بوضع ملف js.js في عنصر head بينما ينصح دائمًا أن تقوم بإضافته قبل نهاية العنصر body، وبالتالي يتم تنفيذ كود JavaScript عندما يتم تحميل الصفحة بالكامل (بالطبع توجد أستثناءات لهذه القاعدة).

	<!-- نقوم بوضع السكريبت قبل نهاية جسم الصفحة -->
	<script src="js/js.js"></script>
</body>
</html>

الأمر الثاني هو في خصائص CSS نفسها، لاحظ أنك عندما تضغط على أزرار التنقل لن سوف تظهر الصور لبرهة ثم تختفي ثانية، وإذا قمت بفحص الصورة، ستجد أنه تتم إضافة الخاصية display: block بشكل صحيح (من خلال كود الجافاسكريبت)، لكن ستجد أيضًا أنه يتم تطبيق الخاصية opacity: 0 مما يؤدي إلى إختفاء الصورة (المحدد .fade:not(.show)) (أحد خصائص Bootstrap)، ولحل هذه المشكلة يجب أن يتم إضافة الصنف show للصورة التي يجب إظهاراها، لذلك سوف نقوم بتعديل كود JavaScript لكي يتم إضافة الصنف show كالتالي:

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = slides.length }
  
  
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; // إخفاء كامل الشرائح
        // حذف الصنف show من كل الصور
        slides[i].classList.remove('show');
    }
    slides[slideIndex - 1].style.display = "block"; // تعديل تنسيق الشريحة المفعلة
    slides[slideIndex - 1].classList.add('show');	// إضافة الصنف show إلى الصورة التي يجب إظهارها فقط
}

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

شكرا" استاذ نجح امر التنقل ولكن لا تظهر بكامل الصفحه قمت بعمل  100vh   لكلا" من width and height ولكن لم ينجح

2-قمت باضافه timer في js  ولا يعمل مالسبب

3- ايضا" مع اننا قمنا باخفاء كامل الشراذح الا انها تظهر عندما احدث الصفحه وقمت بارفاق صوره

templete 1.zip

لاحظ أنك أستخدمت ملف js.js مرتين، مرة في عنصر head ومرة في نهاية عنصر body، أرجو منك أن تحذف النسخة الأولى الموجودة في عنصر head حتى لا تحدث مشاكل لاحقًا

بتاريخ 2 ساعات قال Ahmed Alfadaly:

لا تظهر بكامل الصفحه قمت بعمل  100vh   لكلا" من width and height ولكن لم ينجح

وحدة القياس vh وvw مختلفتان، حيث أن كل منهما يعني نسبة مختلفة، الأولى (vh) إختصارًا لـ viewport height أي طول نافذة (طول الجزء الظاهر منها viewport)، بينما vw إختصار لـ viewport width وتعني عرض النافذة (عرض الجزء الظاهر منها viewport).

على العموم يمكنك أن تقوم بجعل حجم الصورة كبير (يملئ عرض الشاشة) من خلال تعديل خصائص top و left في الصنف show:

.show {
    position: absolute;
    left: 0;
    top: 0;
  
    z-index: -1;	// لجعل الصورة تظهر خلف النصوص، يمكنك حذفه إن أردت ولكن سوف تغطي الصورة على النصوص
}

أيضًا يجب حذف الخاصية position: relative من حاوية عارض الشرائح (الصنف slideshow-container)، لأنه يجعل حجم الصور أصغر.

الأمر الأخير، ستلاحظ أن أزرار التنقل لا تعمل، لأن الصنف show يتم تطبيقه على هذه الأزرار (يحتوي على الخاصية z-index بقيمة -1)، بمجرد إزالة هذا الصنف من الأزرار سوف تعمل بشكل بدون مشكلة، وإن أردت تغير مكان هذه الأزرار فيمكنك أن تقوم بذلك من خلال الخاصية margin، كالتالي على سبيل المثال:

.dots { /* يجب أن تضيف هذا الصنف إلى عنصر div الحاوي للأزرار*/
	margin-top: -75px; /* رفع الأزرار إلى الأعلى قليلًا*/
}

بتاريخ 2 ساعات قال Ahmed Alfadaly:

2-قمت باضافه timer في js  ولا يعمل مالسبب

لا يوجد مؤقت موجود في كود جافاسريبت، هل متأكد من أنك قمت بحفظ الملف بعد كتابة الكود؟ على العموم لكي تقوم بعمل مؤقت timer في جافاسكريبت يمكنك أن تستعمل دالة setInterval ، كالتالي:

var timer = setInterval(function() {
  showSlides(slideIndex);
  slideIndex++;	// تغير رقم الصورة الحالية
}, 5000);	// تغير الصورة كل 5 ثواني

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

بتاريخ 3 ساعات قال Ahmed Alfadaly:

3- ايضا" مع اننا قمنا باخفاء كامل الشراذح الا انها تظهر عندما احدث الصفحه وقمت بارفاق صوره

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

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

templete 1.zip

بتاريخ منذ ساعة مضت قال سامح أشرف:

لاحظ أنك أستخدمت ملف js.js مرتين، مرة في عنصر head ومرة في نهاية عنصر body، أرجو منك أن تحذف النسخة الأولى الموجودة في عنصر head حتى لا تحدث مشاكل لاحقًا

وحدة القياس vh وvw مختلفتان، حيث أن كل منهما يعني نسبة مختلفة، الأولى (vh) إختصارًا لـ viewport height أي طول نافذة (طول الجزء الظاهر منها viewport)، بينما vw إختصار لـ viewport width وتعني عرض النافذة (عرض الجزء الظاهر منها viewport).

على العموم يمكنك أن تقوم بجعل حجم الصورة كبير (يملئ عرض الشاشة) من خلال تعديل خصائص top و left في الصنف show:

.show {
    position: absolute;
    left: 0;
    top: 0;
  
    z-index: -1;	// لجعل الصورة تظهر خلف النصوص، يمكنك حذفه إن أردت ولكن سوف تغطي الصورة على النصوص
}

أيضًا يجب حذف الخاصية position: relative من حاوية عارض الشرائح (الصنف slideshow-container)، لأنه يجعل حجم الصور أصغر.

الأمر الأخير، ستلاحظ أن أزرار التنقل لا تعمل، لأن الصنف show يتم تطبيقه على هذه الأزرار (يحتوي على الخاصية z-index بقيمة -1)، بمجرد إزالة هذا الصنف من الأزرار سوف تعمل بشكل بدون مشكلة، وإن أردت تغير مكان هذه الأزرار فيمكنك أن تقوم بذلك من خلال الخاصية margin، كالتالي على سبيل المثال:

.dots { /* يجب أن تضيف هذا الصنف إلى عنصر div الحاوي للأزرار*/
	margin-top: -75px; /* رفع الأزرار إلى الأعلى قليلًا*/
}

لا يوجد مؤقت موجود في كود جافاسريبت، هل متأكد من أنك قمت بحفظ الملف بعد كتابة الكود؟ على العموم لكي تقوم بعمل مؤقت timer في جافاسكريبت يمكنك أن تستعمل دالة setInterval ، كالتالي:

var timer = setInterval(function() {
  showSlides(slideIndex);
  slideIndex++;	// تغير رقم الصورة الحالية
}, 5000);	// تغير الصورة كل 5 ثواني

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

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

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

templete 1.zip

على العموم يمكنك أن تقوم بجعل حجم الصورة كبير (يملئ عرض الشاشة) من خلال تعديل خصائص top و left في الصنف show:

.show { position: absolute; left: 0; top: 0; z-index: -1; // لجعل الصورة تظهر خلف النصوص، يمكنك حذفه إن أردت ولكن سوف تغطي الصورة على النصوص }

لم افهم هذا الجزء ما علاقه هذا الصنف بحجم الصوره لانه خاص بالازرار

ولكن نجح الامر فعلا" 

سؤال اخير استاذي للما يحب عل الtimer العمل حين انتقل بالازرار كنت كتبته منفردا" لكي يعمل بمفرده حتي عند فتح الصفحه وعدم الضغط عل الزر للتنقل وايضا" لاحظت ان الثواني تختلف كل تنقل وتكون اسرع

هذا ما كنت اسال عنه

$(function () {

var images = [ 'images/diagoona-bg-1.jpg', 'images/diagoona-bg-2.jpg', 'images/diagoona-bg-3.jpg', ]

var imageHead = document.getElementById('image-head')

var i = 0 setInterval(function () { imageHead.style.backgroundImage = 'url(' + images[i] + ')'

i = i + 1

if (i == images.length) { i = 0 } }, 3000)

})

بتاريخ 9 دقائق مضت قال Ahmed Alfadaly:

لم افهم هذا الجزء ما علاقه هذا الصنف بحجم الصوره لانه خاص بالازرار

ولكن نجح الامر فعلا" 

يتم إستعمال الصنف show لعرض الشرائح، يمكنك أن تقوم بفتح أدوات مطوري المواقع Dev Tools ومراقبة الشرايح في قائمة Elements أثناء تغير الشرائح وستجد أنه يتم إضافة هذا الصنف إلى الشريحة التي يتم تعرضها حاليًا، لذلك قمت بتغير الصنف show في حاوية الأزرار إلى dots بدلًا من show

بتاريخ 13 دقائق مضت قال Ahmed Alfadaly:

سؤال اخير استاذي للما يحب عل الtimer العمل حين انتقل بالازرار كنت كتبته منفردا" لكي يعمل بمفرده حتي عند فتح الصفحه وعدم الضغط عل الزر للتنقل وايضا" لاحظت ان الثواني تختلف كل تنقل وتكون اسرع

سبب حوث هذه المشكلة هو الضغط على أزرار التنقل أكثر من مرة مما يؤدي إلى تشغيل أكثر من مؤقت في نفس الوقت، لحل هذه المشكلة يجب أن نقوم بعمل متغير timer خارج الدالة currentSlide ونقوم بحذف هذا المؤقت وعمل آخر جديد، كالتالي:

var timer;

// الدالة الخاصة برموز الاتجاهات
function currentSlide(n) {
    showSlides(slideIndex = n);
  
    // حذف المؤقت القديم إن وجد
    if (timer) {
        clearInterval(timer);
    }
  
  	// يتم تعديل قيمة المتغير timer بمؤقت جديد
    timer = setInterval(function () {
        showSlides(slideIndex);
        console.log(slideIndex);
        slideIndex++;
    }, 5000);
}

كما يمكنك أنك تقوم بجعل المؤقت خارج الدالة currentSlide بدون مشكلة لكي يعمل بشكل إفتراضي، كالتالي:

var timer = setInterval(function () {
    showSlides(slideIndex);
    console.log(slideIndex);
    slideIndex++;
}, 5000);

// الدالة الخاصة برموز الاتجاهات
function currentSlide(n) {
    showSlides(slideIndex = n);
}

بتاريخ 22 دقائق مضت قال Ahmed Alfadaly:

هذا ما كنت اسال عنه

هذا الكود يعمل بشكل سليم ويقوم بتغير الخلفية كل ثلاث ثواني، لكن عليك فصل جملة var i = 0 عن المؤقتت نفسه من خلال وضع فاصلة منقوطة ; بعد تعريف المتغير، كالتالي:

$(function () {
  var images = [ 'images/diagoona-bg-1.jpg', 'images/diagoona-bg-2.jpg', 'images/diagoona-bg-3.jpg'];
  var imageHead = document.getElementById('image-head');
  var i = 0;

  setInterval(function () {
    imageHead.style.backgroundImage = 'url(' + images[i] + ')';
    i = i + 1;
    if (i == images.length) { i = 0 }
  }, 3000);
})

بتاريخ 14 ساعات قال سامح أشرف:

يتم إستعمال الصنف show لعرض الشرائح، يمكنك أن تقوم بفتح أدوات مطوري المواقع Dev Tools ومراقبة الشرايح في قائمة Elements أثناء تغير الشرائح وستجد أنه يتم إضافة هذا الصنف إلى الشريحة التي يتم تعرضها حاليًا، لذلك قمت بتغير الصنف show في حاوية الأزرار إلى dots بدلًا من show

سبب حوث هذه المشكلة هو الضغط على أزرار التنقل أكثر من مرة مما يؤدي إلى تشغيل أكثر من مؤقت في نفس الوقت، لحل هذه المشكلة يجب أن نقوم بعمل متغير timer خارج الدالة currentSlide ونقوم بحذف هذا المؤقت وعمل آخر جديد، كالتالي:

var timer;

// الدالة الخاصة برموز الاتجاهات
function currentSlide(n) {
    showSlides(slideIndex = n);
  
    // حذف المؤقت القديم إن وجد
    if (timer) {
        clearInterval(timer);
    }
  
  	// يتم تعديل قيمة المتغير timer بمؤقت جديد
    timer = setInterval(function () {
        showSlides(slideIndex);
        console.log(slideIndex);
        slideIndex++;
    }, 5000);
}

 

كما يمكنك أنك تقوم بجعل المؤقت خارج الدالة currentSlide بدون مشكلة لكي يعمل بشكل إفتراضي، كالتالي:

var timer = setInterval(function () {
    showSlides(slideIndex);
    console.log(slideIndex);
    slideIndex++;
}, 5000);

// الدالة الخاصة برموز الاتجاهات
function currentSlide(n) {
    showSlides(slideIndex = n);
}

 

هذا الكود يعمل بشكل سليم ويقوم بتغير الخلفية كل ثلاث ثواني، لكن عليك فصل جملة var i = 0 عن المؤقتت نفسه من خلال وضع فاصلة منقوطة ; بعد تعريف المتغير، كالتالي:

$(function () {
  var images = [ 'images/diagoona-bg-1.jpg', 'images/diagoona-bg-2.jpg', 'images/diagoona-bg-3.jpg'];
  var imageHead = document.getElementById('image-head');
  var i = 0;

  setInterval(function () {
    imageHead.style.backgroundImage = 'url(' + images[i] + ')';
    i = i + 1;
    if (i == images.length) { i = 0 }
  }, 3000);
})

 

اسف استاذي لكثره الاسئله ولكن اعلم انه صحيح اقصد عندما اضعه يبطل شيفره التنقل 

اشعر انه لا يمكن عمل timer  مع ازرار التنقل فواحد منهما يعمل بشكل سليم والاخر لا

هذا هو الملف وما فائده /* في  ملف  index  فانها تظهر خطأ ولكني وجدت انه عند ازالتها العناصر تتحرك لليمين

<div style="/*text-align:center*/" class="dots">

templete 1.zip

بتاريخ 6 ساعات قال Ahmed Alfadaly:

اسف استاذي لكثره الاسئله ولكن اعلم انه صحيح اقصد عندما اضعه يبطل شيفره التنقل 

اشعر انه لا يمكن عمل timer  مع ازرار التنقل فواحد منهما يعمل بشكل سليم والاخر لا

إستخدام المؤقت timer مع أزرار التنقل بشكل منفصل قد يسبب بعض المشاكل، لكن في حالة إستخدمت المؤقت داخل الدالة currentSlide كما وضحت سابقًا، سوف يحل هذه المشكلة، حيث يتم حذف المؤقت في كل مرة يتم الضغط على أحد الأزرار من خلال clearInterval وعمل مؤقت جديد ليبدأ عد خمس ثواني، كالتالي:

var timer;

// الدالة الخاصة برموز الاتجاهات
function currentSlide(n) {
    showSlides(slideIndex = n);
  
    // حذف المؤقت القديم إن وجد
    if (timer) {
        clearInterval(timer);
    }
  
  	// يتم تعديل قيمة المتغير timer بمؤقت جديد
    timer = setInterval(function () {
        showSlides(slideIndex);
        console.log(slideIndex);
        slideIndex++;
    }, 5000);
}

بتاريخ 6 ساعات قال Ahmed Alfadaly:

ما فائده /* في  ملف  index  فانها تظهر خطأ ولكني وجدت انه عند ازالتها العناصر تتحرك لليمين

<div style="/*text-align:center*/" class="dots">

هذا مجرد تعليق comment لهذه الخاصية (يمكنك كتابة تعليقات CSS داخل الخاصية style بدون مشكلة)، ويمكنك حذف هذه الخاصية (text-align) إن أردت فكل ما تقوم به هو محاذات الأزرار إلى المنتصف.