Question

我正在尝试使用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)
});

请看一下我尝试重新编写动画脚本并添加自动旋转。 jsfiddle link 2：http://jsfiddle.net/gnswK/2/

Answer 1

这个想法非常好，但实施需要多次调整。

首先，转移到rotateFn的{{1}}不是函数，而是从第一个函数调用返回的任何函数（因为您使用了setInterval）。

其次，区间处理程序未绑定到适当的对象。在jQuery中，您可以使用(function(){...})()将所需范围绑定到处理程序。

第三，你想要旋转类，而不是将同一个类设置为all。因此，您需要根据索引和当前周期为每个rotateFn.bind($(this))分配一个类。

结果：

div

Demo

顺便说一句，你的原始小提琴的课程分配顺序是不同的，并没有遵循任何特定的轮换逻辑。如果您希望订单不同，可以调整处理程序。

如何无限期地轮换多个类？

1 个答案:

Demo