制作没有递归的滑块

鉴于以下jsFiddle，如何在不构建堆栈的情况下实现与我相同的效果？

http://jsfiddle.net/YWMcy/1/

我尝试过这样的事情：

jQuery(document).ready(function () { 'use strict'; (function ($) { function validateOptions(options) { if (typeof(options.delay) == typeof(0)) { $.error('Delay value must an integer.'); return false; } else if (options.delay < 0) { $.error('Delay value must be greater than zero.'); return false; } if (typeof(options.direction) == typeof('')) { $.error('Direction value must be a string.'); return false; } else if (!(options.direction in ['left', 'right', 'up', 'down'])) { $.error('Direction value must be "left", "right", "up", or "down".'); return false; } if (typeof(options.easing) == typeof('')) { $.error('Easing value must be a string.'); return false; } if (typeof(options.selector) == typeof('')) { $.error('Selector value must be a string.'); return false; } if (options.transition  1) { $(this).cycle('slide', settings); } }); }, slide: function (options) { return this.each(function () { var settings = { delay: 5000, direction: 'left', easing: 'swing', selector: '*', transition: 3000 }, animation, property, value; if (options) { $.extend(settings, options); } switch (settings.direction) { case 'left': animation = {left: '-=' + $(this).width()}; property = 'left'; value = $(this).width(); break; case 'right': animation = {left: '+=' + $(this).width()}; property = 'left'; value = -$(this).width(); break; case 'up': animation = {top: '-=' + $(this).height()}; property = 'top'; value = $(this).height(); break; case 'down': animation = {top: '+=' + $(this).height()}; property = 'top'; value = -$(this).height(); break; default: jQuery.error('Direction ' + settings.direction + ' is not valid for jQuery.fn.cycle'); break; } $(this).children(settings.selector + ':first-child').each(function () { $(this).delay(settings.delay); $(this).animate( animation, settings.transition, settings.easing, function () { $(this).css(property, value); } ); }); $(this).append($(this).children(settings.selector + ':first-child').detach()); $(this).children(settings.selector + ':first-child').each(function () { $(this).delay(settings.delay); $(this).animate( animation, settings.transition, settings.easing, function () { $(this).parent().cycle('slide', settings); } ); }); }); } }; jQuery.fn.cycle = function (method, options) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.fn.cycle'); } }; }(jQuery)); jQuery('.slider').cycle(); }); 

但是each()方法没有考虑在循环期间添加的节点。

Answer 1

您可以通过setInterval()启动_cycle()函数，以定期更新滑块：

 setInterval(function() { _cycle2(slider, transition_duration, easing); }, delay_duration); 

请注意，我将原始的_cycle2()函数重命名为_cycle2() ，并删除了delay_duration参数。 你可以在这里看到一个有效的演示 。

Answer 2

你不想要任何类似的东西（真实）。

您的问题源于这样一个事实，即您正在创建一个静态函数，然后试图弄清楚如何使子项动画，其约束条件是将它们全部保留在静态函数的范围内。

您应该为每个元素创建一个对象实例，让对象保持滑块的状态，并让它通过滑块操作所需的实现更新该状态。

http://jsfiddle.net/qjVJF/3/

  (function ($) { var $b = $.behaviors || {}; $b.slider = function(element, options) { this.element = $(element); this.panels = this.element.find('.slide'); this.options = $.extend({}, $b.slider.defaults, options); this.currentPanel = 0; var horizontal = (this.options.direction == 'left' || this.options.direction == 'right'); var anti = (this.options.direction == 'left' || this.options.direction == 'up'); var distance = horizontal ? '600' : '150'; this.action = anti ? '-='+distance : '+='+distance; this.origin = anti ? distance : 0-distance; this.edge = horizontal ? 'left' : 'top'; this.animation = horizontal ? { "left": this.action } : { "top" : this.action }; this.panels.css(this.edge, this.origin+'px').show().first().css(this.edge, '0px'); this.delayNext(); return this; } $b.slider.defaults = { delay: 500, direction: 'left', easing: 'swing', transition: 3000 }; $b.slider.prototype = { delayNext: function() { setTimeout($.proxy(this.slideNext, this), this.options.delay); }, slideNext: function() { var current = this.panels[this.currentPanel % this.panels.length]; var next = $(this.panels[++this.currentPanel % this.panels.length]) .css(this.edge, this.origin+'px'); var plugin = this; next.add(current).animate( this.animation, this.options.transition, this.options.easing, function() { if (this == current) plugin.delayNext(); } ); } }; $.fn.cycle = function (options) { return this.each(function() { $(this).data('bCycle', new $b.slider(this, options)); }); }; }(jQuery)); jQuery(document).ready(function () { jQuery('.slider').cycle(); }); 

Answer 3

也许这个插件http://docs.jquery.com/Plugins/livequery可以帮到你？

Live Query利用jQuery选择器的强大function，通过绑定事件或自动神奇地触发匹配元素的回调，即使在页面加载和DOM更新后也是如此。

例如，您可以使用以下代码将click事件绑定到所有A标记，甚至可以通过AJAX添加任何A标记。

  $('a') .livequery('click', function(event) { alert('clicked'); return false; });