jquery 上下切换

jQuery是一款非常强大的JavaScript库，能够大大简化开发过程。其中之一的功能是上下切换，非常适合用于浏览图片、文章等。

$('document').ready(function() {
  var currentIndex = 0;
  var items = $('ul li');
  var itemLength = items.length;

  function showCurrent() {
    items.eq(currentIndex).addClass('active')
      .siblings().removeClass('active');
  }

  $('.next').click(function() {
    currentIndex += 1;
    if (currentIndex > itemLength - 1) {
      currentIndex = 0;
    }
    showCurrent();
  });

  $('.prev').click(function() {
    currentIndex -= 1;
    if (currentIndex < 0) {
      currentIndex = itemLength - 1;
    }
    showCurrent();
  });
});

以上代码将实现一个简单的上下切换效果，其中变量currentIndex为当前索引位置，items为需要切换的元素，itemLength为元素总数。

函数showCurrent为控制元素状态的函数，当点击上下切换按钮时，currentIndex的值加或减1，如果已经到达最后一个或第一个元素，则回到初始状态，并通过showCurrent()函数控制元素的消失和出现。

通过以上代码，开发人员可以轻松地实现一个简单有效的上下切换功能，为用户提供更好的网站体验。