jquery移动端横向展示栏

在移动端开发中，经常需要用到横向展示栏，很多开发者选择使用jQuery来实现该功能。下面将介绍如何使用jQuery实现移动端横向展示栏。

// HTML代码
<div class="swiper">
  <ul class="swiper-wrapper">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
  </ul>
</div>

// CSS代码
.swiper {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.swiper-wrapper {
  list-style: none;
  display: flex;
}

.swiper-wrapper li {
  flex-shrink: 0;
}

.swiper-wrapper li a {
  display: block;
  padding: 10px;
  background-color: #ccc;
  text-align: center;
  margin-right: 10px;
}

.swiper-wrapper li:last-child a {
  margin-right: 0;
}

// JS代码
$(function() {
  $('.swiper').each(function() {
    new Swiper($(this),{
      slidesPerView: 'auto',spaceBetween: 10,freeMode: true
    });
  });
});

在HTML代码中，我们使用了一个div包含一个ul，ul中包含了若干个li，每个li又包含一个a标签。在CSS代码中，我们将div设置为横向滚动，ul设置为flex布局，每个li设置为不可缩小，并设置间距。在JS代码中，我们使用了jQuery和一个名叫Swiper的插件来实现横向展示栏的效果。

总结来说，使用jQuery实现移动端横向展示栏只需要三部分代码：HTML代码、CSS代码和JS代码。其中，CSS部分主要实现样式的布局，JS部分则使用了插件来实现横向滚动的效果。