Упростить JQuery слайд петли - PullRequest
Новая
       5

Упростить JQuery слайд петли

0 голосов
/ 07 декабря 2018

В настоящее время я работаю над текстовым слайдером, используя jquery.

Код опирается на переключение слайдов и постепенное исчезновение.

Пример кода здесь https://codepen.io/fja3omega/pen/GwVYXM

Мой jQuery: 

jQuery( document ).ready(function() {
    jQuery.fn.slideFadeToggle  = function(speed, easing, callback) {
        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    }; 
    var counted = 1;
    jQuery(".slidem").find( "#rotate1" ).slideFadeToggle();
    setInterval(function(){
        counted = counted + 1;
        torotate = "#rotate" + counted;
        if(counted!=5) {
            jQuery(".slidem").find( torotate ).slideFadeToggle();
        } else {
            counted = 1;
            jQuery(".slidem .rotater" ).show();
            jQuery(".slidem").find( "#rotate1" ).slideFadeToggle();
            jQuery(".slidem").find( "#rotate5" ).show();
        }
    }, 3000);
});

Мне было интересно, есть ли способ сократить или упростить jQuery.

1 Ответ

0 голосов
/ 07 декабря 2018

Да, вы можете упростить и улучшить свой код, удалив все ненужные атрибуты id и class.Также вы можете сделать свой код более абстрактным, чтобы поддерживать любое количество «слайдов» не только 5.

См. Фрагмент ниже: 

jQuery(document).ready(function() {
  jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
  };
  var n = 0, slides = jQuery('.slidem > div');
  (function slide() {
    n = n * (n < slides.length) || +!slides.show();
    slides.eq(n++).slideFadeToggle();
    setTimeout(slide, 1000);
  })()
});
.irotate {
  text-align: center;
  margin: 0 auto;
  padding: 10% 0;
  display: block;
}

.thisis {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
}

.slidem {
  overflow: hidden;
  text-align: center;
  min-width: 90px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="irotate">
  <div class="thisis">This is a&nbsp;</div>
  <div class="thisis slidem">
    <div>&nbsp;</div>
    <div>simple</div>
    <div>super easy</div>
    <div>fun</div>
    <div>working</div>
  </div>
  <div class="thisis">&nbsp;Text Slider</div>
</div>
...