CSS 实现按钮横向排列滚动效果，点击自动滑动到中间

您可以使用 CSS 的 flex 布局来实现按钮横向排列成一行，并使用 overflow 属性来隐藏超出宽度的部分。同时，您可以使用 JavaScript 来实现按钮的左滑和右滑效果。

首先，将按钮包裹在一个父容器中，添加一个固定宽度的容器来限制按钮的显示区域。设置父容器的 overflow 属性为 hidden，使超出宽度的部分隐藏。然后，使用 flex 布局设置按钮的横向排列。最后，使用 JavaScript 监听按钮的点击事件，当点击靠边的按钮时，通过改变父容器的 scrollLeft 属性来实现左滑或右滑效果。

以下是一个示例的代码：

HTML 代码：

<div class='container'>
  <div class='new-from flex'>
    <div class='play_from'>
      <span data-count='18' data-code='ffm3u8' data-id='1'>非凡去广</span>
    </div>
    <div class='play_from'>
      <span data-count='18' data-code='aliyun' data-id='2'>速映4K</span>
    </div>
    <div class='play_from'>
      <span data-count='18' data-code='dym3u8' data-id='3'>139蓝光</span>
    </div>
    <div class='play_from'>
      <span data-count='18' data-code='youku' data-id='4' class='on'>优酷视频</span>
    </div>
    <div class='play_from'>
      <span data-count='18' data-code='1080zyk' data-id='5'>优质资源库</span>
    </div>
    <div class='play_from'>
      <span data-count='18' data-code='bfzym3u8' data-id='6'>暴风超清</span>
    </div>
    <div class='play_from'>
      <span data-count='18' data-code='lzm3u8' data-id='7'>量子去广</span>
    </div>
    <div class='play_from'>
      <span data-count='18' data-code='kuaikan' data-id='8'>快看蓝光</span>
    </div>
    <div class='play_from'>
      <span data-count='7' data-code='HT-' data-id='9'>速映2K</span>
    </div>
  </div>
</div>

CSS 代码：

.container {
  width: 300px; /* 设置容器宽度 */
  overflow: hidden; /* 隐藏超出宽度的部分 */
}

.flex {
  display: flex; /* 使用 flex 布局 */
  overflow-x: scroll; /* 添加滚动效果 */
  scroll-behavior: smooth; /* 平滑滚动效果 */
  white-space: nowrap; /* 防止换行 */
}

.play_from {
  margin-right: 10px; /* 设置按钮之间的间距 */
}

.play_from:last-child {
  margin-right: 0; /* 去除最后一个按钮的右边距 */
}

JavaScript 代码：

var container = document.querySelector('.container');
var buttons = document.querySelectorAll('.play_from');

buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    var scrollLeft = container.scrollLeft;
    var buttonWidth = button.offsetWidth;
    var buttonLeft = button.offsetLeft;

    if (buttonLeft < scrollLeft) {
      container.scrollLeft = buttonLeft;
    } else if (buttonLeft + buttonWidth > scrollLeft + container.offsetWidth) {
      container.scrollLeft = buttonLeft + buttonWidth - container.offsetWidth;
    }
  });
});

通过以上代码，您可以实现按钮横向排列成一行，并具有滚动效果。当点击靠边的按钮时，被点击的按钮会自动滑动到中间位置。