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

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

GIF تظهر شريط التمرير أثناء العمل

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

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

لغة البرمجة

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

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


    

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

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

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

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

    
        

    SCSS

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

    : heart_decoration:

    يمكننا استخدام 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 لهذا البرنامج التعليمي.