3

我正在尝试使用 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 链接 2：http: //jsfiddle.net/gnswK/2/

4

1 回答 1

0

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

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

其次，间隔处理程序未绑定到适当的对象。在 jQuery 中，您可以使用rotateFn.bind($(this))以将所需范围绑定到处理程序。

第三，您想轮换班级，而不是为所有班级设置相同的班级。因此，您需要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);

演示。

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

于 2013-08-04T07:35:12.473 回答