Question

我目前正在使用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。

Answer 1

是的，您可以简化和改进代码，删除所有不必要的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>

简化jQuery Slideup循环

1 个答案: