javascript - jQuery click through array, change 3 items on page -

javascript - jQuery click through array, change 3 items on page -

i have array of objects values link, image tag , title.

var array = [ { 'link': 'link0', 'src': 'page-0.jpg', 'title': 'title 0' }, { 'link': 'link1', 'src': 'page-1.jpg', 'title': 'title 1' }, { 'link': 'link2', 'src': 'page-2.jpg', 'title': 'title 2' }, { 'link': 'link3', 'src': 'page-3.jpg', 'title': 'title 3' }, { 'link': 'link4', 'src': 'page-4.jpg', 'title': 'title 4' } ];

my page has 3 images titles below each:

[title 4], [title 0], [title 1]

the lastly array item in slot one, first array item in slot 2 , sec item in slot three

when user clicks left or right arrows need loop , forth through array, changing 3 slots on page so:

[4], [0], [1] (start view) [0], [1], [2] [1], [2], [3] [2], [3], [4] [3], [4], [0] [4], [0], [1] (end view)

anyone know how this? thanks,

let's break downwards requirements!

each time user clicks button, need increment or decrement value(s) reference array. values need stored somewhere - utilize 3 variables (global), if you'd like. demo, assigned them "state" object:

var state = { start_a: 4, start_b: 0, start_c: 1 }

the next part logic increments/decrements our values. code isn't special , cleaned (or optimized), here's wrote:

function click(dir) { var key; // loop state object appropriate values (key in state) { // based on direction, need update values 0 or 4 (first/last) // not break inner/outer bound if (dir === -1) { if (state[key] === 0) { state[key] = 4; } else { state[key] += dir; } } else { if (state[key] === 4) { state[key] = 0; } else { state[key] += dir; } } } // homecoming state object homecoming state; }

finally, need pass our increment/decrement function direction. that, binded 2 event handlers , pass 1/-1.

document.getelementbyid('previous').addeventlistener('click', function(){ var info = click(-1); updatevalues(data); }); document.getelementbyid('next').addeventlistener('click', function(){ var info = click(1); updatevalues(data); });

here's fiddle demonstration:

http://jsfiddle.net/ul8fb/

hope helps!

javascript arrays onclick infinite-loop