JQuery ul li click move to next in list

Question

OK, nearly there, looking to use Jquery and css class (images) to navigate up and down an HTML ul li list in the same way a select option drop down works only want to only display 1 item, not a drop down button, but a next/prev css class to work though the list with only one item showing at a time so the whole effect is a bit like a spinner. e.g.

$('.next').click (function( MOVE TO NEXT ITEM IN LIST ))
$('.prev').click (function( MOVE TO PREV ITEM IN LIST ))

with a list a bit like

<ul class="">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> etc ....
</ul>
<img src="but..." class="next">
<img src="but..." class="prev">

Suggestions please - and thanks in advance

Answer 1

var active = 0; // starts at zero
var list = $('ul');

$('.next').bind('click', function() {
    active = active == list.length-1 ? 0 : active + 1;
});

$('.prev').bind('click', function() {
    active = active == 0 ? list.length-1 ? active - 1;
});

var getActive = function() {
    return list.children('li').eq(active);
};

Now, use getActive() to get the active list element.

UPDATE: if you want to hide all items except the active list item, just add:

$('.prev,.next').bind('click', function() {
    getActive().show().siblings().hide();
});

Answer 2

If I understand your question correctly you only want 1 list element at a time to be visible. To do this I would modify the functions from David's answer to do something like this.

var active = 0; // starts at zero
var list = $('ul');

var hideListItems = function(active) {
    $.each(list, function(count, item) {
        if (count !== active) {
            item.css({'display': 'none'});
        } else {
            item.css({'display': 'block'});
        }
    }
};

$('.next').bind('click', function() {
    active = active == list.length-1 ? 0 : active + 1;
    hideListItems(active);
});

$('.prev').bind('click', function() {
    active = active == 0 ? list.length-1 ? active - 1;
    hideListItems(active);
});

Answer 3

People need to check their code before posting it! Neither of the above answers work.

I fixt it:

 var active = 0; // starts at zero
 var list = $('ul');

 list.children('li').eq('0').siblings().hide(); // Hide all except first list element

 $('.next').bind('click', function() {
  active = active == list.children('li').length-1 ? 0 : active + 1;
 });

 $('.prev').bind('click', function() {
  active = active == 0 ? list.children('li').length-1 : active - 1;
 });


 var getActive = function() {
  return list.children('li').eq(active);
 };

 $('.prev,.next').bind('click', function() {
  getActive().show().siblings().hide();
 });

Answer 4

many thanks, how can I show 10 list items at a time?