jquery旋转木马 - 没有插件

我想旋转我的div与next和prev按钮。我知道有插件等可用，但我想自己做，只是我不太确定如何。jquery旋转木马 - 没有插件

因此，这里的HTML标记，我至今

<div class="prev-btn"></div> 
<div class="row"> <!-- content in here --></div> 
<div class="row"> <!-- content in here --></div> 
<div class="row"> <!-- content in here --></div> 
<div class="next-btn"></div>

我想要做的是显示1行的时间，当我点击上/下一个按钮，显示不同的DIV 。当我在最后一行时，下一行将再次显示第一行。

我知道如何做onclick事件和切换div。但我真的不知道如何确定我在哪一行以及如何选择下一个显示。

如何让我的下一个/上一页按钮正常工作？

来源

2013-04-01 Becs Carter

你想自己做，但你问我们该怎么做。您可以使用应用于活动幻灯片的活动课程跟踪哪一个活动。你可以通过使用jQuery .next（）和.prev（）方法来获得下一个或prev。 –

只是你如何能做到这一点的想法..

var $rotator = $(".container"); 
$rotator.find("div .row:gt(0)").hide();

得到的div要显示在列表中

var $current = $rotator.find("div .row:visible"); 
var $next = $current.next();

现在在旁边做单击下一步DIV，

if ($next.length == 0) 
    $next = $rotator.find("div .row:eq(0)"); 

$current.hide(); 
$next.show();

同样，您可以使用.prev()获得以前的兄弟分区。

这是一个简单的Demo

来源

2013-04-01 22:03:33

jquery旋转木马 - 没有插件

回答

相关问题