Како направити клизач слике помоћу јКуери-а

Овај водич ће вас провести кроз изградњу клизача слике помоћу библиотеке јКуери.

ГИФ приказује клизач у акцији

Овај водич ће се састојати из четири дела:

  • ХТМЛ
  • СЦСС
  • ЈС
  • Референце

ХТМЛ

За овај водич користићемо Боотстрап како бисмо одржали да ствари изгледају добро, без трошења пуно времена.

Наша структура ће бити следећа:


    

    Унутар наше ulкласе slidesимаћемо следеће:

  • У нашем .buttonsразреду требали бисте имати следеће:

    Ево примера како htmlби требало да изгледа:

    Напомена: srcАтрибут слике требали бисте заменити својим садржајем.

    
        

    СЦСС

    Користимо Сасс и СЦСС синтаксу да бисмо могли угнездити и користити променљиве

    : хеарт_децоратион:

    За дефинисање стила можемо користити следећи СЦСС:

    // 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()изворни ЈаваСцрипт метод за аутоматизацију садржаја функције на окидачу заснованом на времену.

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

    Користимо pauseпроменљиву да бисмо видели колико милисекунди треба сачекати пре поновног позива функције. Прочитајте више о изворној setIntervalметоди овде: //девелопер.мозилла.орг/ен-УС/доцс/Веб/АПИ/ВиндовТимерс/сетИнтервал. Унутар наше функције користићемо јКуери да бледи између слајдова брзином променљиве аниматионСпеед:

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

    Циљамо први слајд помоћу $('.slides > li:first'). - .fadeOut(animationSpeed)избледиће први слајд, а затим помоћу .next(), прелазимо на следећи слајд. - Када смо се преселили на следећи слајд, ми ћемо га избледети у: .fadeIn(animationSpeed). - Ова секвенца ће се наставити до последњег слајда ( .end()), а затим заустављамо анимацију. Сада ћемо позвати startSliderфункцију за покретање анимације:

    стартСлидер ();

    Репродукуј и паузирај Ова функција није обавезна, али је прилично једноставна за имплементацију. Сакрићемо дугме за репродукцију, тако да не видимо дугмад за репродукцију и паузу:

    $('.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();.

    Референце

    • Погледајте овај водич за изворни код и пример на ЦодеПену.