小编Rag*_*dey的帖子

如何创建无限滚动图库

我正在尝试找出一种方法，使同一行上的多个图像延伸超过 div 继续向左滚动，直到它超出视图，此时它将移动到图像库的末尾并继续再次滚动即使它在视野之外。

这是我到目前为止的代码。我在课堂上对图像进行游戏，因为我觉得这会有所帮助，但我还不确定如何。

html, body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
background-color: black;
}
#permas {
  height: 150px;
  bottom: 0;
  background: blue;
  position: absolute;
  overflow:hidden;
  overflow-y: hidden;
  white-space:nowrap;
}
#permas img {
  height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
<title>Test site
</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="permas">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg">
  <img class="scroller" src="https://i.imgur.com/wURYltS.jpg"> …

Run Code Online (Sandbox Code Playgroud)

html javascript css infinite

Rag*_*dey

lucky-day

2
推荐指数

1
解决办法

1万
查看次数