Javascript 使用“下一步”和“上一步”按钮（如旋转木马）创建菜单列表

我想做一个旋转木马，但我有问题

首先，当您继续单击

Next

按钮时，如果到达最后一个项目，该功能将继续工作。我不知道如何告诉函数停止工作。不过，我还是设法在

prev

按钮中完成了

第二，我需要它是灵活的，因为我不知道宽度，也不知道项目的数量。例如，如果只有两个项目，则不再需要按钮

Next

和

Prev

，我希望将其隐藏或类似于如果项目不再适合容器，则显示

Next

或

Prev

按钮

$（文档）.ready（函数（）{
var余量_左=0；
$（'prev'）。在（'click'，函数（e）上{
e、 预防默认值（）；
如果（左边距！=0）{
左边距=左边距+190；
$（'ul#csx芯片菜单滑块'）。动画({
“左边距”：左边距
}, 300);
}
});
$（“#下一步”）。在（'click'，函数（e）{
e、 预防默认值（）；
左边距=左边距-190；
$（'ul#csx芯片菜单滑块'）。动画({
“左边距”：左边距
}, 300);
});
});
*{
框大小：边框框；
}
.芯片滑块容器{
边框：实心1px；
宽度：100%；
填充：2px；
}
.母公司{
宽度：100%；
显示器：flex；
边框：实心1px；
}
.chips滑块父项.csx芯片项目{
背景色：#中交；
填充物：5px；
}
.chips滑块父.csx芯片项目：第n个子项（2）{
背景色：#DDDDDD；
弹性：1；
显示：块；
溢出x：隐藏；
}
.csx芯片菜单{
填充：0；
保证金：0；
列表样式：无；
空白：nowrap；
}
.csx芯片菜单li{
显示：内联块；
左侧填充：10px；
右边填充：10px；
边框：实心1px；
}
.csx芯片子菜单{
显示：无；
位置：绝对位置；
背景色：#FFFFFF；
填充：0；
保证金：0；
左边距：-11px；
列表样式：无；
}
.csx芯片子菜单li{
显示：块；
}
.csx芯片菜单li：悬停>.csx芯片子菜单{
显示：块；
}





















我通常是这样做的：

在
getMaxMargin（）
函数中，通过从父宽度减去滑块宽度来获得最大负边距。差异是可以添加到滑块的最大偏移量

然后简单地使用Math.max确保始终保持在该限制之上。对于另一端-不超过0-使用Math.min。因此，整行代码的神奇之处在于：
margin\u left=Math.min（0，Math.max（getMaxMargin（），margin\u left+amount））

$（文档）.ready（函数（）{
var余量_左=0；
$（'prev'）。在（'click'，函数（e）上{
e、 预防默认值（）；
animateMargin（190）；
});
$（“#下一步”）。在（'click'，函数（e）{
e、 预防默认值（）；
动画边缘蛋白（-190）；
});
常量animateMargin=（数量）=>{
margin_left=Math.min（0，Math.max（getMaxMargin（），margin_left+amount））；
$（'ul#csx芯片菜单滑块'）。动画({
“左边距”：左边距
}, 300);
};
常量getMaxMargin=（）=>
$（“#csx芯片菜单滑块”）.parent（）.width（）-$（“#csx芯片菜单滑块”）[0]。scrollWidth；
});
这可能会帮助您找出“下一步”按钮的问题


$（文档）.ready（函数（）{
$（“#btn nav previous”）。单击（函数（）{
$（“.menu内框”）.animate（{scrollLeft:”-=100px}）；
});
$（“#btn nav next”）。单击（函数（）{
$（“.menu内框”）.animate（{scrollLeft:+=100px}）；
});
});
nav#菜单容器{
背景#586e75；
位置：相对位置；
宽度：100%；
高度：56px；
}
#前导航{
文本对齐：居中；
颜色：白色；
光标：指针；
字体大小：24px；
位置：绝对位置；
左：0px；
填充：9px 12px；
背景：#8f9a9d；
填充：#FFF；
}
#导航下一站{
文本对齐：居中；
颜色：白色；
光标：指针；
字体大小：24px；
位置：绝对位置；
右：0px；
填充：9px 12px；
背景：#8f9a9d；
填充：#FFF；
}
.菜单内框
{ 
宽度：100%；
空白：nowrap；
保证金：0自动；
溢出：隐藏；
填充：0px 54px；
框大小：边框框；
}
.菜单
{  
填充：0；
保证金：0；
列表样式类型：无；
显示：块；
文本对齐：居中；
}
.菜单项
{
身高：100%；
填充：0px 25px；
颜色：#fff；
显示：内联；
保证金：0自动；
线高：57px；
文字装饰：无；
文本对齐：居中；
空白：无换行；
}
.菜单项：悬停{
文字装饰：下划线；
}
.最后一项{
右边距：50px；
}

不，不工作。
Next
按钮甚至不起作用。更改了getMaxMargin方法-请注意，它现在使用“$”（“#csx芯片菜单滑块”）[0]。scrollWidth”作为jquerys width（）返回的不是完整的宽度，而是显示的宽度。我从来没有使用过jquery，所以请随意查找jquery对应的方法。是的，它现在可以工作了。不过，我会尝试一下灵活性。我注意到，当我不断单击
Next
按钮时，项目仍在向前移动，并有一点移动。结果仍然和我的第一期一样。我对上一期增加利润率有点怀疑