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
Post a Comment