Question

我正在寻找一些关于为网站创建水平滚动菜单栏的建议（在计算机上查看，而不是在手持设备上查看）。我在编码时非常生疏，但我真的只是在寻找如何实现这种效果的大致轮廓。首先，让我解释一下我要做的事情。

它看起来像这样，其中＆lt; - 和 - ＆gt;是箭头的图像：

＆lt; ---- C | D | E | F ----＆gt;

如果您要点击任一箭头，菜单（或者更确切地说，分别向左或向右移动的对象，使菜单的某些部分现在可见，而其他部分现在不可见，例如（如果您是单击左箭头）：

＆lt; ---- A | B | C | D -----＆gt;

换句话说，这个菜单的目的是比屏幕宽，但我只想要在箭头之间显示什么。

非常感谢任何帮助。

Answer 1

查看swipe.js，它们非常易于在网页中使用，您也可以使它们响应。

https://github.com/thebird/Swipe

您将使用此代码

创建一个滑动功能滑块

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

在<div></div>内创建您的页面（A | B | C）

Answer 2

使用以下脚本将有所帮助

<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

<a href="#" id="prev2">Prev</a>
<div class="pics" id="menu" style="position: relative;">
    <div>A | B | C</div> 
    <div>D | E | F</div>       
    <div>G | H | I</div>       
</div>           
<a href="#" id="next2">Next</a>

DEMO

Answer 3

您可以通过将所有内容放在固定宽度的div中来实现此目的。

例如：

<div class="content-box">
    <div class="inner-container">
        <div> A </div>
        <div> B </div>
        <div> C </div>
        <div> D </div>
        <div> E </div>
        <div> F </div>
        <div> G </div>
        <div> H </div>
    </div>
</div>

现在，当点击任何箭头时，您可以手动移动.inner-container。

CSS就是这样的：

  .content-box{
     position: relative;
     width: 12.5em;
     overflow: hidden;
  }

  .inner-container{
     position: absolute;
  }

  .inner-container > div{
      width: 1em;
  }

此外，在左右图像点击中，您可以使用以下代码...

$('.left-btn').click(function(){
       $('.inner-container').each(function() {
             $( this ).css({'left', (parseInt($(this).css('left') - 16) + 'px' });
       });
});

// here 16 refers to the size of the divs in the inner-container.

这只是你想要的概述，而没有深入细节。

PS：请记住您没有使用bootstrap。

创建水平滚动菜单栏

3 个答案: