以15集为一单元正行显示；选集下方会显示1-15，16-1…这样的集数区间，可以落焦，光标在区间上切换，集数也相应滑动，集数区间超过整屏时光标滑动逻辑与选集逻辑一致。代码如何实现？

这种界面设计通常涉及到分页显示和用户交互，你可以通过以下几个步骤在前端（比如HTML、CSS和JavaScript）实现：

1. HTML结构:
创建一个包含多个`<li>`元素的容器，每个`li`代表一个集数区间，例如：

<div id="episode-container">
  <ul>
    <li class="active">1-15</li>
    <li>16-30</li>
    <!-- 更多... -->
  </ul>
</div>

2. CSS样式:
设置容器和列表的样式，包括滚动条隐藏等，同时对活跃区域进行标记：

#episode-container {
  overflow-x: auto;
  white-space: nowrap;
}

.episode-item {
  cursor: pointer;
}
.active {
  background-color: #ccc; /* 高亮当前选集 */
}

3. JavaScript逻辑:
- 初始化事件监听器，当光标在`li`元素上移动时，更新`active`类并处理集数滑动。
- 使用`offsetWidth`获取屏幕宽度，并计算每一页有多少集数区间，然后在适当位置插入分割点。
- 当光标离开一个区间时，移除`active`类，移到下一个可用的区间。
- 对于超出屏幕范围的情况，使用类似`scrollLeft`和`scrollWidth`属性来跟踪和调整页面滚动。

以下是部分伪代码实现：

const episodeContainer = document.getElementById('episode-container');
let currentIndex = 0;

// 获取所有集数区间并添加到DOM
updateEpisodeList();

function updateEpisodeList() {
  // 根据总集数计算区间和滚动位置
}

episodeContainer.addEventListener('scroll', () => {
  if (/* 判断是否需要改变集数显示 */) {
    currentIndex = /* 计算新的索引 */;
    setActiveEpisode(currentIndex);
  }
});

function setActiveEpisode(index) {
  episodeContainer.querySelectorAll('.episode-item').forEach((item, i) => {
    item.classList.remove('active');
    if (i === index) {
      item.classList.add('active');
    }
  });
}

// 其他处理逻辑，如鼠标点击或触控操作...

记得根据实际需求调整细节，这只是一个基础的框架示例。如果你是在使用React、Vue或其他MVVM框架，对应的API会有细微差别。