Javascript / Jquery元素轮播

Question

I am trying to make a javascript/jquery carousel. I have an unordered list and inside the ulist i have more lists. I get the first lit with:

list = $(wrapper).find("li:eq(0)").show()

On the button-next down i want it to show next list so it would be:

list = $(wrapper).find("li:eq(1)").show()

on the button-previous i want the list to show previous list. How could I achieve something like this, to append ("li:eg(x+1/x-1)).show()

Answer 1

Introduce a variable to keep track of the current list. When a user clicks the next button, increment it by one, and vice-versa for when previous is clicked. Then use this variable in your selector.

list = $(wrapper).find("li:eq("+ currentList +")").show()

Sidenote: You might want to introduce some bounds checking so currentList never goes below 0 and never exceeds the number of lists you have available.

//On previous click
if(currentList - 1 > 0){
  //do something
}


//assign a variable to keep track of the upper bounds
var maxList = $(wrapper).find('li').length;

//On next click
if(currentList + 1 < maxList - 1){
  //do something
}