2013-05-04 57 views
0

enter image description here如何两个阵列

我试图创建一个循环滑动动画组元素之间的循环,我有两个数组:

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); 

现在上面的代码工作正常,但我相信这已经做了很多次之前,我想知道有没有人知道是否有一个更好的更简单的方法来做到这一点,允许循环前进和后退?

回答

1

如何使用模块?有一个全局变量,每次你移动时增加,然后用数组长度来模块化。您可以访问阵列,如:props[shift%len]

如果len 3(如上),如果你正在访问的道具相对于第一elmsIdx你可以得到这些结果(0):

POC:的jsfiddle。 net/Q8dBb,这也可以在不修改阵列的情况下工作,所以我相信这样会更快一些。 //(shift + elmsIdx)%len == 0;
shift = 1; //(shift + elmsIdx)%len == 1;
shift = 2; //(shift + elmsIdx)%len == 2;
shift = 3; //(shift + elmsIdx)%len == 0;
shift = 4; //(shift + elmsIdx)%len == 1;

其实,使用对象可以使其更加灵活(移多种方式,复位,不管你想要添加)。下面是一个例子:

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/

+0

它不起作用backwords http://jsfiddle.net/arcm111/Q8dBb/1/ – razzak 2013-05-04 18:14:26

+0

能够解决它希望道具[(i-shift + len)%len],谢谢 – razzak 2013-05-04 18:26:33

+0

实际上你会运行成为问题(ei:如果转移结束进一步消极)。此外,我添加的新解决方案将更加灵活...检查出来。 – smerny 2013-05-04 19:28:05

2

如果你不介意修改道具数组,你可以.shift()关闭的第一个元素,然后.push()是到数组的末尾,然后再次做:

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

要旋转道具数组,你可能只是这样做:

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

因此,每个周期只需要调用rotateProps(),然后重复你做了什么的第一次。

+0

+1我正要写这个。 :) – PSL 2013-05-04 17:46:05

+0

如何循环backworkd? – razzak 2013-05-04 18:05:06

+0

@razzak - 使用'.pop()'和'.unshift()'以另一种方式旋转。 – jfriend00 2013-05-04 18:31:02