2

我创建了一个循环播放 x 数量幻灯片的 jQuery 圆形轮播。我一直在为这个滑块添加分页。每个点都是与每张幻灯片相关的列表项。当第一张幻灯片可见时，第一张幻灯片具有当前课程。当您单击下一步时，该类将从 li 编号 1 中删除并添加到 li 编号 2。

我遇到的问题是，一旦我浏览了所有列表项，我希望将“当前”类添加回第一个列表项 - 单击上一个按钮时也需要发生相反的情况。

这是我的分页jQuery代码：

window.next = function() {
var li = jQuery("li.current");
if (li.length)
    li.removeClass("current").next().addClass("current");
else
    jQuery("li").first().addClass("current");
}
window.prev = function() {
var li = jQuery("li.current");
if (li.length)
    li.removeClass("current").prev().addClass("current");
else
    jQuery("li").last().addClass("current");
}
}

和我的 html 标记：

<ul>
<li class="current"></li>
<li></li>
<li></li>
</ul>

谁能告诉我如何让这个循环？你可以在这里看到我的工作http://www.samskirrow.com/projects/carousel

4

2 回答 2

3

你可以简单地检查是否next存在，如果不存在，你必须在最后，所以选择第一个：

if (li.length){

    var $next = li.next();

    if($next.length == 0) $next = $("li").first();

    li.removeClass("current");
    $next.addClass("current");
}

同样对于上一个。

于 2013-03-29T13:28:58.540 回答
0

试试这个：

window.next = function() {
   var li = jQuery("li.current");
   if (li.length && li.next().length)
       li.removeClass("current").next().addClass("current");
   else {
       li.removeClass("current");
       jQuery("li").first().addClass("current");
   }
}

window.prev = function() {
   var li = jQuery("li.current");
   if (li.length && li.prev().length)
       li.removeClass("current").prev().addClass("current");
   else {
       li.removeClass("current");
       jQuery("li").last().addClass("current");
   }
}
于 2013-03-29T13:28:29.927 回答