制作一个没有递归的滑块
Making a slider without recursion
给定以下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 < 0) {
$.error('Transition value must be greater than zero.');
return false;
}
return true;
}
var methods = {
init: function (options) {
return this.each(function () {
var settings = {
delay: 5000,
direction: 'left',
easing: 'swing',
selector: '*',
transition: 3000
};
if (options) {
$.extend(settings, options);
}
$(this).css({
overflow: 'hidden',
position: 'relative'
});
var styles = {
left: 0,
position: 'absolute',
top: 0
};
switch (settings.direction) {
case 'left':
styles.left = $(this).width() + 'px';
break;
case 'right':
styles.left = -$(this).width() + 'px';
break;
case 'up':
styles.top = $(this).height() + 'px';
break;
case 'down':
styles.top = -$(this).height() + 'px';
break;
default:
jQuery.error('Direction ' + settings.direction + ' is not valid for jQuery.fn.cycle');
break;
}
$(this).children(settings.selector).css(styles).first().css({
left: 0,
top: 0
});
if ($(this).children(settings.selector).length > 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()方法不考虑在循环过程中添加的节点
您可以通过setInterval()启动_cycle()功能，定期更新滑块:
setInterval(function() {
_cycle2(slider, transition_duration, easing);
}, delay_duration);
注意，我将原来的_cycle()函数重命名为_cycle2()，并删除了delay_duration参数。您可以在这里看到一个工作演示。
你不会想要任何类似while(true)的东西。
你的问题源于这样一个事实，你正在创建一个静态函数，然后试图找出如何动画的孩子与保持它所有在你的静态函数的范围内的约束。
你应该为每个元素创建一个对象的实例，让对象维护滑块的状态，并通过滑块操作所需的实现来更新该状态。
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();
});
也许这个插件http://docs.jquery.com/Plugins/livequery可以帮助你?
Live Query利用jQuery选择器的强大功能，为匹配的元素自动绑定事件或触发回调，甚至在加载页面并更新DOM之后也是如此。
例如，您可以使用以下代码将单击事件绑定到所有a标记，甚至是您可能通过AJAX添加的任何a标记。
$('a')
.livequery('click', function(event) {
alert('clicked');
return false;
});
相关文章：
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- 给定一个带有数字的数组，我如何编写一个递归函数，当 2 个元素加起来为一个目标时，它会在数组中查找索引
- 递归查找嵌套数组中的最后一个字符串
- 为递归算法添加一个记忆
- 对于用NodeJS编写的递归MongoDB归档程序来说，这是一个好的架构吗
- 我怎样才能把它变成一个循环，而不是一个递归函数
- 计算一个函数在JS中被递归调用的次数
- 在JavaScript中，从一组数组递归地构建一个字典/嵌套对象
- JavaScript 挑战:使用递归创建一个平均计算函数
- 创建一个 JavaScript 递归过滤器函数
- 从递归 Javascript 函数中返回一个变量
- 请帮我一个递归函数
- 另一个递归JavaScript函数
- 访问一个函数“”的不同级别内的属性;原型;函数和递归函数
- 根据递归ul中的输入获取一个表单的序列化数组
- 这是一个有效的递归函数吗
- 使用递归为数组中的每个项返回一个值
- 递归地获取另一个标记中的所有标记节点
- JavaScript是否在每次递归调用时启动一个新的堆栈?
- 实现递归ajax调用，并在一个条件下停止它
