Question

我正在使用具有水平导航栏的常规主页（Twitter自举式）。

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

当按钮太多（简单的if按钮＆gt; 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;
            }

这是结构，可能还有另一个'overflow：hidden'div父级，所以我可以创建一个可滚动/滑动的区域。

我感谢任何帮助。

Answer 1

在您的规格中，您声明如果您有一定数量的按钮，例如“超过x个按钮”，则需要显示滑块。因此，您想要创建一个看起来正常的导航栏，无论是否有滑块。不幸的是，除非我能看到你的CSS，否则我无法帮你解决问题的这个方面;我只能用jQuery来帮助你。

对于初学者，你必须写出你的条件：

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

在我们继续之前，我想指出一个明显的事实，即制作滑块有很多不同的方法。无法看到你的代码（我知道我现在可能听起来像是一个破碎的记录，但你仍然是Stack Overflow的新手，所以这就是我教你），我能想到的最兼容的解决方案是创建导航栏并在滑块按钮的左侧和右侧留出足够的空间（我们将操纵visibility属性来显示/隐藏它们，而不是display属性 - 这也将保持导航栏在慢速浏览器中跳转加载。）

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

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

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

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...};

在我们开始编写幻灯片函数之前，请务必记住，当您希望滑块显示左侧的更多元素时，您实际上需要滑动到的元素< em>向右移动。

这也是脚本的另一部分，可以通过几种方式实现。您选择的实现将主要基于您的HTML和CSS。对于这个方法，我将简单地假设您将使用带有position: relative的滑动元素和一些具有overflow: hidden的包装div。

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

下一步是确定要用于幻灯片效果的内容。为了方便起见（因为你使用的是bootstrap - 因此，你更有可能让所有按钮的大小相同），我将假设你所有的导航按钮都是相同的尺寸：

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);
...

然而，我建议的选项是编写一个点击处理程序，只要用户仍然将鼠标悬停在按钮上，导航栏就会缓慢滑动。

jquery水平ul / navbar滑块

1 个答案: