button - Prev Next with jquery -


i need go through elements previuous , next buttons having trouble working out how it. can help. prev/next should loop continuously ie. when last item goes first , when first item through prev next click take last item , forth.

<ul> <li>number 1 item</li> <li>number 2 item</li> <li>number 3 item</li> <li>number 4 item</li> </ul> 

many thanks, c

this should started: fiddle

html:

<ul>   <li>number 1 item</li>   <li>number 2 item</li>   <li>number 3 item</li>   <li>number 4 item</li> </ul> <input type="button" class="next" value=">" /> <input type="button" class="prev" value="<" /> 

javascript:

(function(){     var $lis = $('ul li');     var index = 0, lastindex = 0;      start(); // activate first, add event listeners buttons      function next(){         lastindex = index;         if(++index == $lis.length) index = 0; // if next out of bounds go first         $lis.eq(index).addclass('active');         $lis.eq(lastindex).removeclass('active');     };      function prev(){         lastindex = index;         if(--index < 0) index = ($lis.length - 1); // if prev less first to last         $lis.eq(index).addclass('active');         $lis.eq(lastindex).removeclass('active');     };     function start(){         $lis.eq(0).addclass('active');         $('.next').click(next);         $('.prev').click(prev);     } })(); 

Comments

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

java - Android recognize cell phone with keyboard or not? -

iphone - How would you achieve a LED Scrolling effect? -