在CSS/PHP中创建Netflix风格滚动菜单的技巧？

在一个网站上工作，该网站将允许会员对书籍进行编目、上架和审查。现在，主屏幕会显示书籍封面的图像，以及有关书籍的基本信息。书籍填满屏幕，然后包装到下一行

我想做的是有一个“Netflix风格”的界面。i、 e.第一行=当代浪漫，第二行=西部片，第三行=吸血鬼/狼人，等等。该行显示该类别的前几本书，用箭头向右和向左滚动显示其他书

想知道有没有类似的例子？这是你的电话号码。请注意，这些书都是浪漫风格的书，所以书的封面可能是“活泼”的，虽然不是不雅或色情的。

诀窍是创建一个带有

位置：relative的“容器”元素（允许在其中绝对定位）和
溢出：隐藏以隐藏轨迹

在这里面，放置一个“轨迹”元素，位置为：绝对和
宽度：2000px或无论它需要多宽

在轨道内部，您的书本元素应放置为
float:left和适当的
右边距
值

两个绝对定位的元素应充当左右滑块。javascript
setInterval
可以每隔10毫秒左右检查鼠标是否悬停在它们上面。如果是，请将“track”元素的
left
css属性更改为向左或向右滑动

我创建了一个示例来说明这一点。显然，可以添加更复杂的代码来检查轨迹是否已到达边缘，但您可以了解其要点。
诀窍是使用
位置：relative（允许在其中绝对定位）和
溢出：隐藏以隐藏轨迹

在这里面，放置一个“轨迹”元素，位置为：绝对和
宽度：2000px或无论它需要多宽

在轨道内部，您的书本元素应放置为
float:left和适当的
右边距
值

两个绝对定位的元素应充当左右滑块。javascript
setInterval
可以每隔10毫秒左右检查鼠标是否悬停在它们上面。如果是，请将“track”元素的
left
css属性更改为向左或向右滑动

我创建了一个示例来说明这一点。显然，可以添加更复杂的代码来检查轨迹是否已到达边缘，但您可以了解其要点