jquery carousel - 没有插件

Question

我想用next和prev按钮旋转我的div.我知道有插件等可用,但我想自己做,只是我不太确定如何.

所以这是我到目前为止的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.但我真的不知道如何确定我在哪一行以及如何选择下一个要显示的行.

如何让我的next/prev按钮正常工作？

Answer 1

只是想知道如何做到这一点..

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

得到你想要显示的div和列表中的下一个div

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

现在点击下一步这样做,

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

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

类似地,您可以使用.prev()以获得先前的兄弟div.

这是一个简单的演示