Simple navigate buttons

Buttons that loop through dom selector

by jruddell

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="<" />

CSS

.active { color: red }

JavaScript

(function(){
    var $lis = $('ul li');
    var index = 0, lastIndex = 0;
    
    start();
        
    function next(){
        lastIndex = index;
        if(++index == $lis.length) index = 0;
        $lis.eq(index).addClass('active');
        $lis.eq(lastIndex).removeClass('active');
    };
    
    function prev(){
        lastIndex = index;
        if(--index < 0) index = ($lis.length - 1);
        $lis.eq(index).addClass('active');
        $lis.eq(lastIndex).removeClass('active');
    };
    function start(){
        $lis.eq(0).addClass('active');
        $('.next').click(next);
        $('.prev').click(prev);
    }
})();