Question

这是我的代码：https://codepen.io/anon/pen/EoQmjb

这个想法是它将每个x秒的不同文本旋转到位置以使句子不同。代码被压缩并略微修改为以下内容：

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

            var defaults = {
                fadeSpeed: 500,
                pauseSpeed: 500,
                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:200, pauseSpeed:3000});
 });

问题是它只在文本转换器有多个实例时才有效。是否可以调整此代码，以便它可以同时执行多个代码？您可以在我的示例中看到A B C同时显示。

Answer 1

有两个id为rotate1和rotate2的div实例，并在两个div上调用rotaterator

int userChoice = JOptionPane.showConfirmDialog(null, "Are you sure to close this window?", "Confirm closing", JOptionPane.YES_NO_OPTION); 
if (userChoice == JOptionPane.YES_OPTION) {
    window.dispose();
}

(function($){
    $.fn.extend({ 
        rotaterator: function(options) {
 
            var defaults = {
                fadeSpeed: 500,
                pauseSpeed: 500,
				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() {
        $('#rotate1').rotaterator({fadeSpeed:200, pauseSpeed:2000});
    $('#rotate2').rotaterator({fadeSpeed:200, pauseSpeed:3000});
 });

Answer 2

页面上不允许重复的HTML元素ID。 jQuery只会抓取第一个并使用它而不是抓住所有这些。如果你改用class，jQuery将抓住所有这些，并且应该可以工作。

我以不同的方式构建HTML（使用跨度而不是div），但这会使用您提供的代码回答您的问题。希望它有所帮助： - ）

<强>的JavaScript

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

            var defaults = {
                fadeSpeed: 500,
                pauseSpeed: 500,
                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:200, pauseSpeed:3000});
 });

<强> HTML

<h1>A weekend of
    <div class="rotate"> 
        <div>fun</div>
        <div>games</div>
        <div>laughter</div>
    </div> and
    <div class="rotate"> 
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <div>d</div>
    </div>
</h1>

扩展文本旋转器以处理多个文本实例

2 个答案: