Jquery滚动/切换效果

我正在寻找jquery中的“滚动切换”（理想情况下使用插件）。如果我有以下HTML：

<ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
</ul>

选择1
选择2
选择3

我想显示第一个选项，隐藏其他选项。每次我“点击/点击”一个选项时，它都会显示下一个选项，并在最后一个选项之后循环到第一个选项。在移动web设备上使用时，我希望它能够响应向上/向下滑动事件，并显示为“滚动”（即使用向上/向下滑动效果）。问得太多了？希望不会，任何指点都会得到赞赏

谢谢

---

保罗

我想你要找的控制装置通常被称为手风琴

jQuery UI中有一个：

对于一些特殊的东西，比如刷卡动作，我认为你必须自己去捕捉它们，然后决定如何处理它们。可以指示jQuery UI手风琴显示特定的“选项卡”，如下所示：

$('#my-ul').accordion('activate', tabIndex);

---

如果您希望编写自己的插件，这里有一个小示例可以帮助您开始

它基于这种标记的原理工作

<ul id="test">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
</ul>

在这个想法上起作用的是：

1） 除了第一个孩子，把所有的都藏起来 2） 单击任何元素都会隐藏该元素并显示下一个元素（除非单击的元素是子元素列表中的最后一个，在这种情况下会显示第一个项目）

最后，使用以下代码实例化插件：

$('#test').roller();

---

jsFiddle:

谢谢，它有点像我想要的，但不完全像。我只希望有一个选项在任何时候都可见，有点像一个HTML选择，你可以点击/滚动通过。那太好了，谢谢-一个很好的介绍编写插件了！你知道怎么做“滚动”效果吗？我可以看到如何使用.slideDown（）进行向下滚动，但我不知道如何通过向上滑动来显示某些内容（.slideUp（）隐藏元素）。

$('#test').roller();