jquery滚轮/切换效果

Question

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

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

我想第一个选项被显示和其他隐藏。每次我点击一个选项时，它都会显示下一个选项，并在最后一个选项后面的第一个选项中循环。当在移动网络设备上使用时，我希望它响应向上/向下滑动事件并显示为“滚轮”（即使用滑动向上/向下效果）。要问的问题太多了？希望没有，任何指针赞赏。

感谢，

保罗

Answer 1

这里是一个小样本，让你开始，如果你想编写自己的插件

它的工作原则这种标记的

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

然后，这是插件代码（非常基本的，但可扩展）

(function($) { 
    $.fn.roller = function(){ 

     this.children(':not(:first)').hide(); 

     this.children().click(function(){ 
      if($(this).next().length>0){ 
       $(this).hide().next().show(); 
      } 
      else{ 
       $(this).hide().parent().children(':first').show(); 
      } 
     }); 
    }; 
})(jQuery); 

，在这个理念的工作原理：

1）隐藏所有，但第一个孩子 2）单击任何一个元素隐藏了元素和显示下（除非点击的元素是最后一个儿童的名单，在其中情况下显示第一项）。

最后的插件使用此代码实例：

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

的jsfiddle：http://jsfiddle.net/jamiec/zpq3u/

Answer 2

我认为你正在寻找的控制是什么通常被称为一个手风琴。

有一个在jQuery用户界面：http://jqueryui.com/demos/accordion/

对于像刷卡行为特别的东西，我认为你必须自己抓住他们，并决定与他们做什么。在jQuery UI的手风琴可以指示显示出一定的“标签”，像这样：

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