jquery carousel - 没有插件答案

【问题标题】：jquery carousel - without a pluginjquery carousel - 没有插件
【发布时间】：2013-03-23 01:21:59
【问题描述】：

我想用下一个和上一个按钮旋转我的 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。当我在最后一行时，next 将再次显示第一行。

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

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

【问题讨论】：

你想自己做，但你问我们怎么做。您可以使用应用于活动幻灯片的活动类来跟踪哪个是活动的。您可以使用 jQuery 的 .next() 和 .prev() 方法获取下一个或上一个。

标签： jquery carousel

【解决方案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。

这是一个简单的Demo

【讨论】：