如何兩個陣列

Question

我試圖創建一個循環滑動動畫組元素之間的循環，我有兩個數組：

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

現在上面的代碼工作正常，但我相信這已經做了很多次之前，我想知道有沒有人知道是否有一個更好的更簡單的方法來做到這一點，允許循環前進和後退？

Answer 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/

Answer 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()，然後重複你做了什麼的第一次。