تغيير خلفية الشاشة كل فترة زمنية باستخدام jquery وإضافة تأثيرات حركية عليها

Ahmed Ebrahim11 · 14 أغسطس 2021

كيف اقوم بعمل timer للانتقال بين 3 خلفيات للشاشه كل 10ثواني ب jquery، وكيف اتحكم بوقت الانتقال و نوعية الحركة

تم التعديل في 17 أغسطس 2021 بواسطة Wael Aljamal
توضيح السؤال

Wael Aljamal · 16 أغسطس 2021

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

استاذ لم ينجح الامر

وها هو المشروع

templete 1.zip

الملاحظة:

إن ملفات جافاسكربت التي تتفاعل مع مكونات الصفحة يجب أن يتم تحميلها في آخر جزء من الصفحة body لأن عناصر HTML يتم تحميلها بعد البدء بتحميل body صحيح؟ حسب تسلسل الشيفرة في الملف، لذلك إما تنقل تضمين ملف js

<head>
    ...
    <script src="js/js.js"></script>

من head لآخر وسم في body (يفضل كل ملفات جافاسكربت)

	html .......
............
...........

    <script src="assest/JavaScript/jquery-3.1.1.min.js"></script>
    <script src="assest/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/js.js"></script>

</body>

هذا يسرع عرض محتوى الصفحة..

الحل الآخر هو استخدام دوال jQuery لتأخير تنفيذ شيفرة جافاسكربت

$(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)

})

لاحظ هذه الكتابة تمثل document . ready أي انتهاء تحميل الصفحة! لذلك تعمل الشبفرة، ولاحظ مسارات الصور كانت خطأ حيث أنها يجب أن تبدأ باسم المجلد

Wael Aljamal · 14 أغسطس 2021

يمكن عمل الأمر على الخطوات التالية، تعريف مصفوفة تحوي روابط (مسارات الصور)

var images = [
	"https://www.img1...",
	"https://www.img2...",
	"https://www.img3...",
]

ثم نأخذ مرجع للعنصر في الصفحة الذي نضع له الخلفية:

var imageHead = document.getElementById("image-head");
                                        ^^^^^^^^^^^^^

استخدم اسم المعرف Id للعنصر لديك (أو ضع له واحد مخصص)

ثم شيفرة جافاسكربت:

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

setInterval: هي دالة جافاسكربت، تأخذ function وتقوم باستدعائه كل مدة زمنية (الوسيط الثاني)..
i هي متغير يحمل رقم الصورة، وعند كل تكرار (استدعاء كل 1 ثانية) سيتم جلب مسار الصورة المطلوبة (التالية) وإسنادها للخاصية bacjground img وهذا يعمل على تعديل الصورة، عند وصول i لآهر المصفوفة نعيدها ل 0 لأول صورة

Ahmed Ebrahim11 · 16 أغسطس 2021

بتاريخ On 8/14/2021 at 15:49 قال Wael Aljamal:
يمكن عمل الأمر على الخطوات التالية، تعريف مصفوفة تحوي روابط (مسارات الصور)
var images = [
	"https://www.img1...",
	"https://www.img2...",
	"https://www.img3...",
]
ثم نأخذ مرجع للعنصر في الصفحة الذي نضع له الخلفية:
var imageHead = document.getElementById("image-head");
                                        ^^^^^^^^^^^^^
استخدم اسم المعرف Id للعنصر لديك (أو ضع له واحد مخصص)

ثم شيفرة جافاسكربت:
var i = 0;
setInterval(function() {
      imageHead.style.backgroundImage = "url(" + images[i] + ")";
      i = i + 1;
      if (i == images.length) {
        i =  0;
      }
}, 1000);
setInterval: هي دالة جافاسكربت، تأخذ function وتقوم باستدعائه كل مدة زمنية (الوسيط الثاني)..

i هي متغير يحمل رقم الصورة، وعند كل تكرار (استدعاء كل 1 ثانية) سيتم جلب مسار الصورة المطلوبة (التالية) وإسنادها للخاصية bacjground img وهذا يعمل على تعديل الصورة، عند وصول i لآهر المصفوفة نعيدها ل 0 لأول صورة

استاذ لم ينجح الامر

وها هو المشروع

templete 1.zip

Wael Aljamal · 17 أغسطس 2021

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

الاحظ ان الصوره تنتقل فجاه اريد ظهورها بسلاسه وبطئ كيف اقوم بذلك

عليك في هذه الحالة استخدام المؤثرات إما في css transform أو عن طريق جيكويري نفسها

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

وكيف اطيل فتره بقاء الصوره واسف لكثره الاسئله

لاحظ الرقم 3000 اي 3 ثواني، يمكنك زيادتها.

جيكويري:

Ahmed Ebrahim11 · 19 أغسطس 2021

بتاريخ On 8/17/2021 at 02:01 قال Wael Aljamal:

عليك في هذه الحالة استخدام المؤثرات إما في css transform أو عن طريق جيكويري نفسها

لاحظ الرقم 3000 اي 3 ثواني، يمكنك زيادتها.

جيكويري:

التأثيرات والحركات في jQuery

التابع animate

التابع fadeToggle

استاذ اليس من المفترض ان تقوم هذه الشيفره بدور اظهار كل خلفيه بشكل مناسب؟

.fade {

-webkit-animation-name: fade;

-webkit-animation-duration: 1.5s;

animation-name: fade;

animation-duration: 1.5s;

}

@-webkit-keyframes fade {

from {

opacity: .4

}

to {

opacity: .8;

}

to {

opacity: 1

}

@keyframes fade {

from {

opacity: .4

}

to {

opacity: .8;

}

to {

opacity: 1

}

templete 1.zip

تغيير خلفية الشاشة كل فترة زمنية باستخدام jquery وإضافة تأثيرات حركية عليها

السؤال

Ahmed Ebrahim11

رابط هذا التعليق

شارك على الشبكات الإجتماعية

5 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Ahmed Ebrahim11

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Ahmed Ebrahim11

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية