javascript - 如何使用图像气泡创建滚动图像拼贴?
问题描述
我想创建一个带有图像气泡的滚动图像拼贴。
我完成了设计,但我无法理解如何连续滑动这些图片。我的意思是自动轮播滑块。请帮我。
var frst_Img = document.querySelector(".image1");
var scnd_Img = document.querySelector(".image2");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
}
div#container {
width: 1150px;
padding: 5px;
margin: 15px auto;
display: block;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}
.wrapper {
width: 100%;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
.images {
width: 100%;
height: 175px;
position: relative;
}
.images2 {
width: 100%;
height: 175px;
display: block;
position: relative;
}
.images3 {
width: 100%;
display: block;
height: 175px;
position: relative;
}
.image1 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/1.jfif);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image2 {
position: absolute;
top: 0%;
left: 50%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/2.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image3 {
position: absolute;
top: 0%;
left: 85%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/3.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
@keyframes upDown{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(8px);
}
100%{
transform: translateY(0px);
}
}
.image4 {
position: absolute;
top: 0%;
left: 0%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/4.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image5 {
position: absolute;
top: 0%;
left: 33%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/5.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image6 {
position: absolute;
top: 0%;
left: 70%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/6.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 5s infinite;
}
@keyframes upDown2{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(-8px);
}
100%{
transform: translateY(0px);
}
}
.image7 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/7.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image8 {
position: absolute;
top: 0%;
left: 54%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/8.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image9 {
position: absolute;
top: 0%;
left: 88%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/9.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
@keyframes upDown3{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(8px);
}
100%{
transform: translateY(0px);
}
}
<div id="container">
<div class="wrapper">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>
解决方案
如果您能够设置 HTML,则无需使用 Javascript。
一个简单的方法是确保您有足够的要滚动的材料副本,其中一半至少可以覆盖您需要支持的最大屏幕尺寸。
1150的内置宽度对于一些常见的屏幕来说太窄了,所以这个片段有4个副本,将它们向左移动50%,然后回到初始位置,这样它看起来是连续的,你可以离开CSS(和希望设备的 GPU)来保持动画继续播放。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
overflow: hidden;
}
div#container {
width: calc(1150px * 4);
display: flex;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
animation: moveleft 60s infinite linear;
}
.block1,
.block2 {
display: flex;
}
.wrapper {
background: ;
display: inline-block;
rwidth: 100vw;
width: 1150px;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
@keyframes moveleft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.images {
width: 100%;
height: 175px;
position: relative;
}
.images2 {
width: 100%;
height: 175px;
display: block;
position: relative;
}
.images3 {
width: 100%;
display: block;
height: 175px;
position: relative;
}
.image1 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/1.jfif);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image2 {
position: absolute;
top: 0%;
left: 50%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/2.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image3 {
position: absolute;
top: 0%;
left: 85%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/3.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
@keyframes upDown {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(8px);
}
100% {
transform: translateY(0px);
}
}
.image4 {
position: absolute;
top: 0%;
left: 0%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/4.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image5 {
position: absolute;
top: 0%;
left: 33%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/5.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image6 {
position: absolute;
top: 0%;
left: 70%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/6.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 5s infinite;
}
@keyframes upDown2 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0px);
}
}
.image7 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/7.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image8 {
position: absolute;
top: 0%;
left: 54%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/8.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image9 {
position: absolute;
top: 0%;
left: 88%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/9.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
@keyframes upDown3 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(8px);
}
100% {
transform: translateY(0px);
}
}
<div id="container">
<div class="block1">
<div class="wrapper" style="/*background: cyan;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
<div class="wrapper" style="/*background: lime;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>
<div class="block2">
<div class="wrapper" style="/*background: mauve;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
<div class="wrapper" style="/*background: yellow;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>
</div>
推荐阅读
- python - 我怎样才能用一个多字段来做一个跟随系统?
- java - 为什么不相关的网络活动会提高慢环回性能?
- javascript - 使用字典过滤 javascript 数据对象
- javascript - 发布到网络时未提供 Google 电子表格 ID
- javascript - 未捕获的引用错误:表单未在 loadEventListeners 中定义
- python - 努力让 Sum() 函数从列表中输出一个值
- javascript - 使用 JS 的复选框和过滤项目
- mysql - AngularJS 指令无法检查 null
- javascript - 无法在 D3 中移动 svg 元素
- azure-devops - 如何添加外部帐户以对 VSTS Online 中的特定存储库具有权限