كيفية إنشاء شريط تمرير الصور باستخدام jQuery

سيرشدك هذا البرنامج التعليمي خلال إنشاء شريط تمرير للصور باستخدام مكتبة jQuery.

يتكون هذا البرنامج التعليمي من أربعة أجزاء:

• لغة البرمجة
• SCSS
• شبيبة
• المراجع

لغة البرمجة

سنستخدم Bootstrap في هذا البرنامج التعليمي لإبقاء الأشياء تبدو جيدة ، دون قضاء الكثير من الوقت.

سيكون هيكلنا على النحو التالي:

داخل لدينا ulمع فئة من slidesسيكون لدينا ما يلي:

داخل صفنا .buttonsيجب أن يكون لديك ما يلي:

إليك مثال على htmlالشكل الذي يجب أن تبدو عليه:

ملاحظة: يجب استبدال srcسمة الصورة بالمحتوى الخاص بك.

SCSS

نحن نستخدم Sass وبناء جملة SCSS حتى نتمكن من دمج المتغيرات واستخدامها

يمكننا استخدام SCSS التالية لتحديد أسلوبنا:

// Variables $width: 720px; .slider { width: $width; height: 400px; overflow: hidden; margin: 0 auto; text-align: center; .slides { display: block; width: 6000px; height: 400px; margin: 0; padding: 0; } .slide { float: left; list-style-type: none; width: $width; height: 400px; img { width: 100%; height: 100%; } } } .buttons { margin: 0; width: $width; position: relative; top: -40px; margin: 0 auto; .play { display: none; } .btn { display: flex; margin: 0 auto; text-align: center; } }

شبيبة

المتغيرات

في مقتطف الشفرة التالي ، نحدد المتغيرات المستخدمة لاحقًا في الكود الخاص بنا.

var animationSpeed = 1000; // How quickly the next slide animates. var pause = 3000; // The pause between each slide.

سنستخدم متغيرًا فارغًا حيث سنطلق على setIntervalالطريقة:

var interval;

الرسوم المتحركة سنقوم بلف الرسوم المتحركة المنزلق داخل دالة:

function startSlider() {}

نحن نستخدم setInterval()طريقة JavaScript الأصلية لأتمتة محتويات الوظيفة على مشغل يعتمد على الوقت.

interval = setInterval(function() {}, pause);

نستخدم pauseالمتغير لمعرفة عدد المللي ثانية التي يجب انتظارها قبل استدعاء الوظيفة مرة أخرى. اقرأ المزيد عن setIntervalالطريقة الأصلية هنا: //developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. داخل وظيفتنا ، سنستخدم jQuery للتلاشي بين الشرائح بسرعة متغير AnimationSpeed:

$('.slides > li:first') .fadeOut(animationSpeed) .next() .fadeIn(animationSpeed) .end() .appendTo('.slides');

نحن نستهدف الشريحة الأولى باستخدام $('.slides > li:first'). - .fadeOut(animationSpeed)سوف تتلاشى الشريحة الأولى ثم .next()ننتقل إلى الشريحة التالية باستخدام. - بعد أن نكون قد انتقل إلى الشريحة التالية، فإننا سوف تتلاشى في: .fadeIn(animationSpeed). - سيستمر هذا التسلسل حتى آخر شريحة ( .end()) ، ثم نوقف الرسوم المتحركة. سنقوم الآن باستدعاء startSliderالوظيفة لبدء الرسم المتحرك:

startSlider () ،

Play and Pause هذه الميزة اختيارية ، ولكنها سهلة التنفيذ. سنخفي زر التشغيل ، لذا لا نرى زري التشغيل والإيقاف المؤقت:

$('.play').hide(); // Hiding the play button.

سنقوم الآن بإنشاء زر الإيقاف المؤقت (يظهر تلقائيًا عند تحميل الصفحة):

$('.pause').click(function() { clearInterval(interval); $(this).hide(); $('.play').show(); });

We will call our function every time the pause button is clicked using jQuery. - We will remove the interval using the clearInterval method and using our interval variable as the parameter, indicating which interval to stop. - Because our slider is paused, we will hide the pause button using $(this).hide();. Note: we are using this, which will refer to what our parent is calling i.e. .pause. - We will then show our play button so the user can resume the animation: $('.play').show();. The following code sets up our play button (automatically hidden on page load):

$(‘.play’).click(function() { startSlider(); $(this).hide(); $(‘.pause’).show(); });

We will call our function every time the play button is clicked using jQuery.

• We will start or restart the interval using the startSlider function.
• نظرًا لأن شريط التمرير الخاص بنا يعمل حاليًا ، فسوف نخفي زر التشغيل باستخدام $(this).hide();. ملاحظة: نحن نستخدم this، والتي ستشير إلى ما يدعوه والدنا أي .play.
• ونحن بعد ذلك تظهر زر وقفة لدينا بحيث يمكن للمستخدم إيقاف الرسوم المتحركة في الإرادة: $('.pause').show();.

المراجع

• تحقق من التعليمات البرمجية المصدر والمثال على CodePen لهذا البرنامج التعليمي.