jQuery Prev下一个插件增强

我需要使用“上一个”和“下一个”按钮浏览元素。这是 HTML:

JS:

（函数（）{
var$lis=$（'ul li'）；
var指数=0，lastIndex=0；
start（）；//首先激活，将事件侦听器添加到按钮
函数next（）{
lastIndex=指数；
如果（++index=$lis.length）index=0；//如果next超出范围，则转到first
$lis.eq（index.addClass（'active'）；
$lis.eq（lastIndex）.removeClass（'active'）；
};
函数prev（）{
lastIndex=指数；
if（--index<0）index=（$lis.length-1）；//如果prev小于从头到尾
$lis.eq（index.addClass（'active'）；
$lis.eq（lastIndex）.removeClass（'active'）；
};
函数start（）{
$lis.eq（0）.addClass（'active'）；
$（'.next'）。单击（next）；
$（'.prev'）。单击（prev）；
}
})();

这个插件工作完美，这里是

但我想扩展它的功能。我还想启用直接单击列表并记住其索引

我的意思是：比方说，我在点击下一步按钮时一直到第3项，&如果我直接点击

（项目编号：1）然后我想记住我的当前索引位置&当我单击“下一步”按钮时，我应该移动到项目编号2

同样的事情也发生在上一个按钮上

如何扩展此功能

function li_click(){
    lastIndex = index;
    index = $(this).index();
    $lis.eq(index).addClass('active');
    $lis.eq(lastIndex).removeClass('active');
}

function start(){
    $lis.eq(0).addClass('active');
    $('.next').click(next);
    $('.prev').click(prev);
    $lis.click(li_click);
}

以下是您的JSFIDLE的更新版本：

另外，看起来您并不真正需要

lastIndex

变量，您只需删除

active

类，更改

index

，然后将

active

类添加到新的

索引中即可：

$lis.eq(index).removeClass('active');
index = $(this).index();
$lis.eq(index).addClass('active');

function li_click(){
    lastIndex = index;
    index = $(this).index();
    $lis.eq(index).addClass('active');
    $lis.eq(lastIndex).removeClass('active');
}

function start(){
    $lis.eq(0).addClass('active');
    $('.next').click(next);
    $('.prev').click(prev);
    $lis.click(li_click);
}

$lis.eq(index).removeClass('active');
index = $(this).index();
$lis.eq(index).addClass('active');