jQuery轮播-没有插件 [英] jquery carousel - without a plugin

问题描述

我想使用下一个和上一个按钮旋转div.我知道有可用的插件等，但是我想自己做，只是我不太确定该怎么做.

I am wanting to rotate my divs with next and prev buttons. I know there are plugins etc available, but I want to do it myself, only I am not too sure how.

所以这是到目前为止我拥有的html标记

So here is the html markup that I have so far

<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行，当我单击prev/next按钮时，显示另一个div.当我在最后一行时，下一个将再次显示第一行.

What I want to do is display 1 row at a time, and when I click on the prev/next button, display a different div. When I am on the last row, next will display the first row again.

我知道如何进行onclick事件和切换div.但是我真的不知道如何确定我所在的行以及如何选择要显示的下一行.

I know how to do onclick events and toggle a div. But I really don't know how to determine which row I am on and how to select the next one to display.

如何使我的下一个/上一个按钮正常工作?

How can I get my next/prev buttons to work correctly?

推荐答案

仅是有关如何执行此操作的想法.

Just an idea of how you can do this..

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

获取要显示的div以及列表中的下一个div

get div you want to show and the next div in the list

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.

Similarly you can use .prev() to get previous sibling div.

这是一个简单的演示

这篇关于jQuery轮播-没有插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！