jquery水平ul/导航条滑块

我在一个普通的主页上工作，它有一个水平导航栏（twitter引导风格）

问题是：根据您进入网站时的输入，页面将在导航栏中显示混合按钮。它可能会显示4个按钮，或20个按钮，具体取决于该输入

当有太多的按钮（简单的if buttons>x）时，我希望应用一个水平滑块，当用户单击上一个按钮/下一个按钮时，该滑块将通过一个按钮进行动画/滑动

到目前为止，我已经尝试了bxSlider（www.bxSlider.com）和hoverscroll。Hoverscroll还可以，但我需要的是基于点击的东西，而不是鼠标悬停。BxSlider在每次单击时只按固定大小滑动，我希望滑动到某个元素，而不是像素

谢谢

<div id="divone">
  <div id="divtwo">
    <ul id="my-list">
      <li>Link<li>
      <li>Link<li>
      <li>Link<li>
      <li>Link<li>
      <li>Link<li>
       etc.
    <ul>
  </div>
</div>



            #divone
            {
                width: 678px;
                height: 51px;
                position: relative;
            }

            #divtwo
            {
                width: 678px;
                height: 51px;
                overflow: hidden;
            }

            #my-list
            {
                width: 6000px;
            }

链接

链接

链接

链接

链接

等

#女主角
{
宽度：678px；
高度：51px；
位置：相对位置；
}
#第二组
{
宽度：678px；
高度：51px；
溢出：隐藏；
}
#我的名单
{
宽度：6000px；
}

这就是结构，可能还有另一个“overflow:hidden”div父对象，这样我就可以创建一个可滚动/滑动区域

---

非常感谢您的帮助。

在您的说明书中，您曾说过，如果您有一定数量的按钮，请说“多于x个按钮”，您希望滑块出现。因此，您希望创建一个无论是否有滑块都看起来正常的导航栏。不幸的是，我不能帮你解决这个问题，除非我能看到你的CSS；我只能在jQuery方面帮助您

首先，您必须写出您的条件：

if ($("button").length > x) { ...show slider...}

在我们继续之前，我想指出一个显而易见的事实，制作滑块有很多不同的方法。在看不到您的代码的情况下（我知道此时我可能听起来像是一张破唱片，但您仍然不熟悉堆栈溢出，所以这是我教您的），我能想到的最兼容的解决方案是创建导航栏，并在左右两侧为滑块按钮留出足够的空间（我们将操纵

可见性

属性来显示/隐藏它们，而不是

显示

属性-这也将防止导航栏在较慢的浏览器中加载时跳转）

为了实现这一点，我们需要从按钮的两个元素（仅显示选择器）开始：

var buttonLeft = $("#buttonLeft");
var buttonRight = $("#buttonRight");

接下来，如果我们的条件为true，我们将添加要运行的以下行：

buttonLeft.css("visibility", "visible")
          .on("click.sliderLeft", function() {...show more on the left...};
buttonRight.css("visibility", "visible")
           .on("click.sliderRight", function() {...show more on the right...};

现在，在我们开始编写滑动函数之前，请记住，当您希望滑块从左侧显示更多元素时，您实际上希望滑动的元素向右移动

这也是脚本的另一部分，可以通过几十种方式实现。您选择的实现将主要基于HTML和CSS。对于本指南，我将简单地假设您将使用一个滑动元素，该元素具有

位置：relative

和一些具有

溢出：hidden的包装器divde>

var navBar = $("#navBar"); // sliding element

下一步是确定幻灯片效果要使用什么。为了方便起见（并且因为您使用的是引导-因此，您更有可能所有按钮的大小都相同），我假设您所有的导航按钮的大小都相同：

var navButtonWidth = $(".navButtons").width();

为了方便起见，我还将假设按钮的左右边距都设置为
5px
。我将进一步假设每个动画将花费1000毫秒。因此，您将希望在单击处理程序中添加以下行作为幻灯片效果：

var slideAmount = navButtonWidth + 10; //button width plus margin left plus margin right

//left button
...
var slideLeftStr = "+=" + slideAmount + "px";
navBar.animate({ left: slideStr }, 1000);
...

//right button
...
var slideRightStr = "-=" + slideAmount + "px";
navBar.animate({ left: slideStr }, 1000);
...

基本上就是这样。你必须对它进行定制，自定义它，添加一些条件以在条形图结束时禁用幻灯片效果，添加一些解决方法以防止双击等问题，但这应该为你创建自己的动态幻灯片效果提供一个基本的起点



如果你有任何问题，请告诉我。祝你好运！：）



更新：

要回答您关于使用按钮滑动到特定按钮的问题，答案是“是的，您可以这样做”，但您真正想要做的是滑动到下一个或上一个按钮的开始位置（分别）。我可以告诉您，这可能看起来很可怕，但下面是代码：

...
//put this function outside of the click handlers
var slideTo = function (destButton) {
    //destButton is the button you are sliding to
    return destButton.offset().left + "px";   
}     

//put this in both click handlers
...
var destinationButton = ....get the previous or next button based on which handler you're in
navBar.animate({ left: slideTo(destinationButton) }, 1000);
...

然而，我建议的选项是编写一个单击处理程序，只要用户仍将鼠标向下放在按钮上，导航栏就会缓慢滑动。
请发布您现有的html/css/jquery，以便我们知道该编写什么。我可以为您编写一个操作解决方案，但是，如果没有您的代码，这几乎是我所能做的全部，因为我处理的是一个导航栏，按钮的宽度取决于其内容。因此，我不确定这个基于像素的选项有多合适。有没有类似于“滑到li:eq（x）”的东西？这个想法是给你一个简单的例子，在这个例子中，你按一定的量滑动。您还可以在按住按钮的同时让按钮不断滑动