Jquery 创建滚动导航栏

我正在用ASP.NET开发一个网站，但我的设计很差

我想做的是，我在数据库中有很多课程，每门课程都有很多模块。 我想创建一个导航栏，从数据库中获取元素，问题是每个课程都有不同的计数，可能其中一个有10个模块，当我显示它时，导航栏将溢出

如何像幻灯片放映一样创建导航栏但不自动播放，我的意思是我需要创建两个带有导航的按钮来查看导航栏中溢出的元素

对不起，英语不好：） 任何帮助都将不胜感激

提前谢谢！ 编辑： 我需要这样的图片，但隐藏溢出的元素

---

图片如下：

您好，您可以使用bxSlider js完成此操作。此幻灯片可以轻松包含图像、视频或HTML内容。但你有一点css更新应该做得到像你的屏幕截图。这工作很好，很容易

例如：

<ul class="bxslider">
     <li>Course 01</li>
     <li>Course 02</li>
    <li>Course 02</li>
</ul>
$(document).ready(function(){
$('.bxslider').bxSlider({
      auto: true,
      autoControls: true
});

课程01
课程02
课程02

$（文档）.ready（函数（）{
$（'.bxslider'）.bxslider({
是的，
自动控制：正确
});

---

查看更多

您好，您可以使用bxSlider js来完成此操作。此幻灯片可以轻松包含图像、视频或HTML内容。但是，您应该进行一点css更新，以获得与屏幕截图相似的效果。此操作很好，很容易

例如：

<ul class="bxslider">
     <li>Course 01</li>
     <li>Course 02</li>
    <li>Course 02</li>
</ul>
$(document).ready(function(){
$('.bxslider').bxSlider({
      auto: true,
      autoControls: true
});

课程01
课程02
课程02

$（文档）.ready（函数（）{
$（'.bxslider'）.bxslider({
是的，
自动控制：正确
});

---

更多信息，请参见此处我是如何解决其他人寻找类似问题的：

注意：为了在这里运行，我在代码中做了一些修改，因为我使用的是angular，不能从数据库复制数据等

*{
边际：0px；
填充：0px；
}
钮扣{
边界：无；
光标：指针；
}
.导航{
宽度：100%；
}
.左箭头{
背景：#00a4e2；
浮动：左；
文本对齐：居中；
高度：40px；
宽度：3%；
}
.左箭头：悬停{
背景：#69c；
}
.左箭头i{
颜色：#fff；
字号：18px；
}
.右箭头{
显示：内联；
背景：#00a4e2；
浮动：对；
文本对齐：居中；
宽度：3%；
高度：40px；
}
.右箭头：悬停{
背景：#69c；
}
.右箭头i{
颜色：#fff；
字号：18px；
}
.当然{
浮动：左；
字号：0；
溢出：隐藏！重要；
宽度：94%；
空白：nowrap；
}
李：当然可以{
边框：1px实心#69c；
颜色：#fff；
显示：内联块；
字体大小：16px；
高度：40px；
列表样式：无；
文本对齐：居中；
右边距：5px；
}
.当然是李a{
颜色：#fff；
显示：块；
身高：100%；
文字装饰：无；
宽度：100%；
填充：10px；
}
李娜：悬停{
背景：#69c；
}

var-leftM=1；
var-toMove=0；
$（'.左箭头'）。打开({
单击：函数（）{
if（toMove<0）{
leftM-=1；
var el=document.getElementById（leftM）；
var c=el.offsetWidth；
$（“#1”）.animate（{marginLeft:（toMove+=c+5）+'px'}，500）；
}
}
});
$（'.右箭头'）。打开({
单击：函数（）{
var el=document.getElementById（leftM）；
var c=el.offsetWidth；
控制台日志（c）；
$（“#1”）。动画（{marginLeft:（toMove-=（c+5））+'px'}，500）；
leftM+=1；
}
});

这里是我如何解决其他人寻找类似的问题的：

注意：为了在这里运行，我在代码中做了一些修改，因为我使用的是angular，不能从数据库复制数据等

*{
边际：0px；
填充：0px；
}
钮扣{
边界：无；
光标：指针；
}
.导航{
宽度：100%；
}
.左箭头{
背景：#00a4e2；
浮动：左；
文本对齐：居中；
高度：40px；
宽度：3%；
}
.左箭头：悬停{
背景：#69c；
}
.左箭头i{
颜色：#fff；
字号：18px；
}
.右箭头{
显示：内联；
背景：#00a4e2；
浮动：对；
文本对齐：居中；
宽度：3%；
高度：40px；
}
.右箭头：悬停{
背景：#69c；
}
.右箭头i{
颜色：#fff；
字号：18px；
}
.当然{
浮动：左；
字号：0；
溢出：隐藏！重要；
宽度：94%；
空白：nowrap；
}
李：当然可以{
边框：1px实心#69c；
颜色：#fff；
显示：内联块；
字体大小：16px；
高度：40px；
列表样式：无；
文本对齐：居中；
右边距：5px；
}
.当然是李a{
颜色：#fff；
显示：块；
身高：100%；
文字装饰：无；
宽度：100%；
填充：10px；
}
李娜：悬停{
背景：#69c；
}

var-leftM=1；
var-toMove=0；
$（'.左箭头'）。打开({
单击：函数（）{
if（toMove<0）{
leftM-=1；
var el=document.getEl