• 0

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

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

تمّ تعديل بواسطة Wael Aljamal
توضيح السؤال
1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 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 أي انتهاء تحميل الصفحة! لذلك تعمل الشبفرة، ولاحظ مسارات الصور كانت خطأ حيث أنها يجب أن تبدأ باسم المجلد 

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

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

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 لأول صورة
1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 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

1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 1 ساعة قال Ahmed Alfadaly:

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

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

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

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

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

 

 

 

جيكويري:

 

1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ On 8/17/2021 at 02:01 قال Wael Aljamal:

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

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

 

 

 

جيكويري:

 

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

.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

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن