.
how to make a repeated(infinite) set interval
التعليق السابق
شكراً ,رائع .. لكن هل هذه هي الطريقة المستخدمة لبناء سلايد شو لتغيير الخلفية وفي نفس الوقت تغيير محتوى معين لا يمكن تغييره بال 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
قمت بوضع تعليقات في الكود لكي يكون واضح تماما وتتمكن من قراءته بشكل مفهوم .
التعليقات