最终暂停的文本旋转器

我试图在3秒钟内创建一个文本旋转器，然后重复。我发现了一个相关的脚本，但在最后添加暂停时遇到了一些问题。最终暂停的文本旋转器

Codepen： http://codepen.io/AmruthPillai/pen/axvqB/

脚本：

(function($) { 
    $.fn.extend({ 
     rotaterator: function(options) { 
      var defaults = { 
       fadeSpeed: 500, 
       pauseSpeed: 100, 
       child: null 
      }; 
      var options = $.extend(defaults, options); 
      return this.each(function() { 
       var o = options; 
       var obj = $(this); 
       var items = $(obj.children(), obj); 
       items.each(function() { 
        $(this).hide(); 
       }) 
       if (!o.child) { 
        var next = $(obj).children(':first'); 
       } else { 
        var next = o.child; 
       } 
       $(next).fadeIn(o.fadeSpeed, function() { 
        $(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() { 
         var next = $(this).next(); 
         if (next.length == 0) { 
          next = $(obj).children(':first'); 
         } 
         $(obj).rotaterator({ 
          child: next, 
          fadeSpeed: o.fadeSpeed, 
          pauseSpeed: o.pauseSpeed 
         }); 
        }) 
       }); 
      }); 
     } 
    }); 
})(jQuery); 
$(document).ready(function() { 
    $('#rotate').rotaterator({ 
     fadeSpeed: 0, 
     pauseSpeed: 100 
    }); 
});

来源

2017-02-26 Lavonen

你可以等待3秒或任何间隔你喜欢使用setTimeout调用。我更新了你的代码。检查http://codepen.io/anon/pen/XMJQYy

if (next.length == 0){ 
            next = $(obj).children(':first'); 
       setTimeout(function() { 
        $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed}); 
       }, 2000); 
          } else { 
       $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed}); 
}

来源

2017-02-26 08:57:16 mehulmpt

功能已经使用pauseSpeed延迟fadeOut所以我增加了以下内容：

var nextDelay = $(next).is(':last-child') ? o.pauseSpeed + 3000 : o.pauseSpeed

我检查下一个元素.is(':last-child')并添加3000的价值o.pauseSpeed 和使用nextDelay代替o.pauseSpeed推迟fadeOut

Working CodePen

(function($) { 
    $.fn.extend({ 
    rotaterator: function(options) { 

     var defaults = { 
     fadeSpeed: 500, 
     pauseSpeed: 100, 
     child: null 
     }; 

     var options = $.extend(defaults, options); 

     return this.each(function() { 
     var o = options; 
     var obj = $(this); 
     var items = $(obj.children(), obj); 
     items.each(function() { 
      $(this).hide(); 
     }) 
     if (!o.child) { 
      var next = $(obj).children(':first'); 
     } else { 
      var next = o.child; 
     } 

     $(next).fadeIn(o.fadeSpeed, function() { 
      var nextDelay = $(next).is(':last-child') ? o.pauseSpeed + 3000 : o.pauseSpeed 
      $(next).delay(nextDelay).fadeOut(o.fadeSpeed, function() { 
      var next = $(this).next(); 
      if (next.length == 0) { 
       next = $(obj).children(':first'); 
      } 
       $(obj).rotaterator({child: next,fadeSpeed: o.fadeSpeed,pauseSpeed: o.pauseSpeed}); 
      }) 
     }); 
     }); 
    } 
    }); 
})(jQuery); 

$(document).ready(function() { 
    $('#rotate').rotaterator({ 
    fadeSpeed: 500, 
    pauseSpeed: 100 
    }); 
});

最终暂停的文本旋转器

回答

相关问题