Question

正如标题所暗示的那样，我正在尝试创建一个水平滚动<ul> <li> width:auto和overflow:hidden以及上一页和下一页按钮，显然是<div id="wrapper"> <span class="arrow"><</span> <span class="arrow">></span> <ul id="nav"> <li>Abbaiare</li> <li>Bolle</li> <li>Cantante</li> <li>Domodossola</li> <li>Elefante</li> <li>Giovanni</li> <li>Hotel</li> <li>Inti</li> <li>Montagna</li> <li>Nave</li> </ul> </div>。有关如何使用jquery管理它的任何建议？这是我准备的代码......

JSFiddle

HTML：

* {
  margin:0;
  padding:0;
}
#wrapper {
  width:calc(100% - 120px);
  height:60px;
  background-color:#dbdbdb;
  padding:0 60px;
  margin-top:60px;
  font-family:helvetica;
  overflow:hidden;
  position:relative;
  z-index:99; 
}
.arrow {
  display:block;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;
  background-color:#cccccc;
  font-weight:bold;
  cursor:pointer;
  position:absolute;
  top:0;
  z-index:101;
}
.arrow:first-of-type {
  left:0;
}
.arrow:nth-of-type(2) {
  right:0; 
}
#nav {
  width:auto;
  height:60px;
  overflow:hidden;
  list-style-type:none;
  white-space:nowrap;
  transition:2.0s;
}
#nav li {
  display:inline-block;
  height:60px;
  line-height:60px;
  font-size:13px;
  padding:0 30px;
}

CSS：

insertMe

Answer 1

您可以简单地使用bxSlider而无需重新发明轮子。要使代码有效，您只需添加：

＆＃13;

$(function () {
  $('#nav').bxSlider({
    pager: false,
    minSlides: 3,
    maxSlides: 3,
    slideWidth: 150,
    slideMargin: 25
  });
});

＆＃13;

#wrapper {
  margin: auto;
}
.bx-viewport {
  height: 50px !important;
  padding: 0 30px;
  box-sizing: border-box;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" />
<div id="wrapper">
  <ul id="nav">
    <li>Abbaiare</li>
    <li>Bolle</li>
    <li>Cantante</li>
    <li>Domodossola</li>
    <li>Elefante</li>
    <li>Giovanni</li>
    <li>Hotel</li>
    <li>Inti</li>
    <li>Montagna</li>
    <li>Nave</li>
  </ul>
</div>

＆＃13;

Answer 2

希望它对任何人都有用，这就是我所需要的...... （谢谢Praveen Kumar）

JSFiddle

$(".arrow:first-of-type").click(function() {
        var navwidth = $("#nav");
        navwidth.animate( { scrollLeft: '-=200' }, 1000);
    }
);
$(".arrow:nth-of-type(2)").click(function() {
        var navwidth = $("#nav");
        navwidth.animate( { scrollLeft: '+=200' }, 1000);
    }
);

使用按钮和“width：auto”列表水平滚动UL

2 个答案: