我如何通过多个类的不确定性旋转？
我如何通过多个类的不确定性旋转？
提问于 2013-08-03 23:07:14
我正在尝试使用Jquery创建一个旋转框效果。我做了8个div盒子，总共8节课。其中4个类处于活动状态，4个类处于非活动状态。活动类和非活动类之间的区别是宽度、高度和绝对位置坐标。
基本上，我有4个较大的盒子和4个较小的盒子，我希望这些盒子的内容自动地从活动的(大的盒子)变成非活动的(小的盒子)。
要查看旋转效果，请访问jsfiddle链接1:http://jsfiddle.net/gnswK/我希望动画像这样运行，但不需要点击触发器。我需要这个来自动旋转或者在课堂上循环。
jQuery.fn.rotateClasses = function(classes, interval, max) {
var currentRotation = 0;
var timer = null;
var rotateFn = (function() {
var currentClass = currentRotation % classes.length;
var previousClass = currentClass - 1;
if(previousClass == -1) previousClass = classes.length - 1;
this.addClass(classes[currentClass]).removeClass(classes[previousClass]);
currentRotation += 1;
if(max > 0 && currentRotation >= max) clearInterval(timer);
})();
timer = setInterval(rotateFn, interval);
return this;
};
jQuery(document).ready(function() {
$('#rotator').rotateClasses(["active", "active2", "active3", "active4", "non-active-1", "non-active-2", "non-active-3", "non-active-4"], 1000, 0)
});请看我的尝试重新脚本动画和添加一个自动旋转.小提琴链接2：http://jsfiddle.net/gnswK/2/
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-08-04 07:35:12
这个想法非常好，但是实现需要几个调整。
首先，传递给rotateFn的setInterval不是一个函数，而是从第一个函数调用中返回的内容(因为您使用了(function(){...})())。
第二，间隔处理程序没有绑定到适当的对象。在jQuery中，您可以使用rotateFn.bind($(this))将所需的范围绑定到处理程序。
第三，您希望旋转类，而不是将同一个类设置为all。因此，您需要根据每个div的索引和当前周期为其分配一个类。
结果：
jQuery.fn.rotateClasses = function(classes, interval, max) {
var currentRotation = 1;
var timer = null;
var rotateFn = function() {
var len = classes.length;
var cycle = currentRotation++ % len;
this.find('> div').each(function(id,div){
$(div).removeClass().addClass(classes[(cycle+id)%len]);
});
if(max > 0 && currentRotation > max) clearInterval(timer);
};
timer = setInterval(rotateFn.bind($(this)), interval);
return this;
};
$('#rotator').rotateClasses(["active", "active2", "active3", "active4", "non-active-1", "non-active-2", "non-active-3", "non-active-4"], 1000, 20);演示。
顺便说一句，您最初的小提琴类分配顺序是不同的，并且没有遵循任何特定的旋转逻辑。如果希望订单不同，可以调整处理程序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18038171
复制相关文章
相似问题
腾讯云开发者
