0

在此处输入图像描述

我正在尝试为一组元素创建一个循环滑动动画，我有两个数组：

var elms = [elm1, elm2, elm3];
var props = [{x,y,width,height,z-index,opacite,....}, {....}, {....}];

在初始化时，elms将按照与以下相同的顺序定位props：“->不是语法的一部分，它只是为了让事情更容易解释，它的意思是'做一些事情'”

elms[0] -> props[0];
emls[1] -> props[1];
elms[2] -> props[2];

但后来我想像这样循环它们：

elms[0] -> props[2]
elms[1] -> props[0]
elms[2] -> props[1]

接着：

elms[0] -> props[1]
elms[1] -> props[2]
elms[2] -> props[0]

等等……

我试过这个：

function index(n, array){
    var m = n;
    if(n > array.length){
        m = n - array.lenth;
    }else if(n < 0){
        m = array.length + n;
    }
    return m;
}

var active = 0; //the front element

function slide(direction){
    for (i=0; i< elms.length; i++)
    {
        elms[i] -> props[index(i - active, props)]
    }
    if(direction == 'fw'){
        if(active++ => elms.length){
            active = 0;
        }else{
            active++;
        }
    }else if(direction == 'bw'){
        if(active-- < 0){
            active += elms.length;
        }else{
            active--;
        }
    }
}

setInterval(function(){slide('fw')}, 3000);

现在上面的代码工作正常，但我敢肯定这已经做过很多次了，我想知道有没有人知道是否有更好的更简单的方法来做到这一点，它允许向前和向后循环？

4

2 回答 2

2

如果您不介意修改 props 数组，您可以直接.shift()关闭第一个元素，然后.push()放到数组的末尾，然后再次执行：

elms[0] -> props[0];
emls[1] -> props[1];
elms[2] -> props[2];

要旋转 props 数组，您可以这样做：

function rotateProps() {
    var front = props.shift();
    props.push(front);
}

所以，每个循环都只是调用rotateProps()然后重复你第一次做的事情。

于 2013-05-04T17:45:31.360 回答
1

如何使用模块？每次移动时都有一个全局变量，然后使用数组的长度对其进行模块化。您可以访问以下数组：props[shift%len]

如果 len 为 3（如上所述），如果您正在访问与第一个 elmsIdx (0) 相关的道具，则可以获得以下结果：

POC：jsfiddle.net/Q8dBb，这也可以在不修改数组的情况下工作，所以我相信它会更快

班次 = 0; // (shift+elmsIdx)%len == 0;
班次 = 1; // (shift+elmsIdx)%len == 1;
班次 = 2; // (shift+elmsIdx)%len == 2;
班次 = 3; // (shift+elmsIdx)%len == 0;
班次 = 4; // (shift+elmsIdx)%len == 1;
ETC

实际上，使用一个对象可以使它更灵活（改变多种方式，重置，无论你想添加什么）。这是一个例子：

function Shift(len) {
    var _len = len;
    var _s = 0;
    this.left = function() {
        _s = (_s + 1)% _len;
    }
    this.right = function() {
        _s = (_s - 1);
        if (_s < 0) {
            _s = _s + _len;
        }
    }
    this.get = function(idx) {
        return (_s + idx)% _len;
    }
    this.reset = function() {
        _s = 0;
    }
}

使用中：http: //jsfiddle.net/6tSup/1/

于 2013-05-04T17:50:48.930 回答