.
how to make a repeated(infinite) set interval
حسب ما فهمت من سؤالك يمكنك باستخدام setInterval() تكرار دالة ما
كما بالمثال التالي
function repeatedAction() { console.log("تكرر كل ثانية"); } const intervalId = setInterval(repeatedAction, 1000); // لإيقاف ال setInterval نستخدم clearInterval: // clearInterval(intervalId);
لذلك يتم تعريف دالة repeatedAction لتنفيذ الإجراء المطلوب تكرارًا ثم تمرير هذه الدالة لل setInterval() والفاصل الزمني
سنقوم بتمرير دالة و ووقت التاخير ليتم الإعادة بعده مرة أخرى وعدد مرات التشغيل التي يجب بعدها الإعادة.
function repeatInterval(func, delay, repetitions) { let count = 0; let intervalId; intervalId = setInterval(() => { func(); count++; if (count === repetitions) { clearInterval(intervalId); // إعادة التشغيل بعد 5 ثواني setTimeout(() => { count = 0; intervalId = setInterval(func, delay); }, delay); } }, delay); } repeatInterval(() => { console.log("Executing function..."); }, 2000, 5);
لاحظ قمت بإنشاء دالة لتنفيذ ما نريده وبداخلها حددت متغيرات لحفظ قيمة العداد وحفظ الدالة setInterval، لأننا سنحتاج ذلك لحذف المؤقت الخاص بـ setInterval ثم إعادة تعيينها.
ثم قمت باستدعاء الدالة وتمرير ما نريد تنفيذه من خلال تمرير دالة ثم تمرير وقت الإعادة وهو ثانيتين 2000 ثم تمرير عدد المرات التي يجب الوصول إليها قبل الإعادة من الصفر.
شكراً ,رائع .. لكن هل هذه هي الطريقة المستخدمة لبناء سلايد شو لتغيير الخلفية وفي نفس الوقت تغيير محتوى معين لا يمكن تغييره بال css؟
إن كنت تريد الطريقة المستخدمة لبناء سلايد شو , فهذا الكود يلبي إحتياجك تماماً يوضح كيف يمكن بناء slide show مع javascript اللازمة له :
HTML:
<div id="slideshow"> <div class="slide"> <div class="background"></div> <div class="content"> <h2>Slide 1</h2> <p>This is the content of slide 1.</p> </div> </div> <div class="slide"> <div class="background"></div> <div class="content"> <h2>Slide 2</h2> <p> content of slide 2.</p> </div> </div> </div>
CSS:
#slideshow { position: relative; width: 400px; height: 300px; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; } .slide.active { opacity: 1; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; }
JavaScript :
var slides = document.querySelectorAll('.slide'); var currentSlideIndex = 0; function showSlide(index) { // Reset all slides slides.forEach(function (slide) { slide.classList.remove('active'); }); // Show the current slide slides[index].classList.add('active'); } function nextSlide() { currentSlideIndex++; if (currentSlideIndex >= slides.length) { currentSlideIndex = 0; } showSlide(currentSlideIndex); } // Start the slideshow showSlide(currentSlideIndex); setInterval(nextSlide, 3000); // Change slide every 3 seconds
قمت بوضع تعليقات في الكود لكي يكون واضح تماما وتتمكن من قراءته بشكل مفهوم .
التعليقات