CODEWITHSUNDEEP
javascriptarrays
razz
razz

Reputation: 10120

How to cycle between two arrays

enter image description here

I'm trying to create a cycling sliding animation for set of elements, i have two arrays:

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

on initializing, elms will be positioned in the same order as props: "-> is not part of the syntax it's just to make things easier to explain and it means 'do something with'"

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

but then i want to cycle them like:

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

and then:

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

and so forth...

i tried this:

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

now the above code works fine, but i'm sure this has been done many times before and i'm wondering does anyone know if there is a better less complicated way to do this which allows to loop forward and backward?

Upvotes: 0

Views: 87

Answers (2)

Smern
Smern

Reputation: 19086

How about using module? Have a global var that you increment each time you shift, then module that with the length of the arrays. You could access the arrays like: props[shift%len]

If len is 3 (as above), you could get these results if you are accessing the props in relation to the first elmsIdx (0):

POC: jsfiddle.net/Q8dBb, also this would work without modifying your arrays so I believe it would be faster

shift = 0; // (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;
etc

Actually, using an object could make it more flexible (shifting multiple ways, resetting, whatever you want to add). Here is an example for that:

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

in use: http://jsfiddle.net/6tSup/1/

Upvotes: 1

jfriend00
jfriend00

Reputation: 707876

If you don't mind modifying the props array, you can just .shift() off the first element and then .push() is onto the end of the array and then once again do:

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

To rotate the props array, you could just do this:

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

So, each cycle just call rotateProps() and then repeat what you did the first time.

Upvotes: 2

Related Questions