JQuery ul li click move to next in list

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开发者_JAVA百科 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

---

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();
 });

---

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();
});

---

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);
});