文本旋转器在最后一张幻灯片处闪烁

时间:2015-12-11 16:43:59

标签: javascript jquery css

我创建了一个文本旋转器,它使用速度和间隔来确定旋转文本的速度和时间。一切似乎都运行正常,我唯一的问题是最后一次和第一次转换之间的闪烁。换句话说,我可以一起看到旧的和新的条目。有人可以帮我避免这个吗? 我的JSFIDDLE is here

我的JQuery代码是:

    (function($) {


  $(document).ready(function(){

    //<![CDATA[

    (function($) {
      $.fn.rotator = function(settings) {
        settings = jQuery.extend({
          interval: 5000,
          speed:800,
        }, settings);

        return this.each(function() {
          var $t = $(this),
              $item = $t.children().addClass('item').hide();

          $t.addClass('rotator');

          if ($item.length > 1) {
            $item.first().addClass('current').fadeIn(settings.speed);
            setInterval(function() {
              var c = $t.find('.current');
              if (c.next().length === 0) {
                c.removeClass('current').fadeOut(settings.speed);
                $item.first().addClass('current').fadeIn(settings.speed);
              } else {
                c.fadeOut(settings.speed, function () {
                  $(this).removeClass('current')
                    .next().addClass('current')
                    .fadeIn(settings.speed)
                });
              }
            }, settings.interval);
          }
        });
      };
    })(jQuery);

    // Execute here!
    $(function() {
      $('#slider').rotator();
    });
    //]]>



  });


})(jQuery);

0 个答案:

没有答案