javascript - 每 20 毫秒制作一张 1px 的照片幻灯片
问题描述
我需要帮助制作过渡持续时间,特别是当照片向左滑动时,它每 20 毫秒滑动 1px。
单击照片本身时应该发生过渡,而不是下面的栏。
在滑动过程中,单击图像不会有任何效果。
当第二个图像取代第一个图像时,将出现第一个图像(循环方式)。
body{
margin: 0;
padding: 0;
background: #34495e;
}
.slidershow{
width: 700px;
height: 400px;
overflow: hidden;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.navigation{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover{
background: #fff;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slides{
width: 500%;
height: 100%;
display: flex;
}
.slide{
width: 20%;
transition: 0.02s;
}
.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1{
margin-left: 0;
}
#r2:checked ~ .s1{
margin-left: -20%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>hw3</title>
</head>
<body>
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<div class="slide s1">
<img src="1.jpg" alt="image">
</div>
<div class="slide">
<img src="2.jpg" alt="image">
</div>
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
</div>
</div>
</body>
</html>
解决方案
推荐阅读
- python - NumPy 线性方程组
- c - 为什么指针类型的符号以星号开头?
- javascript - 用数组助手替换嵌套的 for 循环 - 查找优先级元素
- linux - Elasticsearch磁盘够用了,但是报错:这个节点上的所有索引都会被标记为只读
- r - R 不会检测到给定的元素
- python - 如何在不填充matplotlib的情况下画一个圆
- android - 升级后的 Fragment IllegalStateException
- python - 用于 chrome 无头 python 的 selenium 设置配置文件
- android - 应用程序未安装在 Android 11 中,但适用于以前的版本
- javascript - 使用手机时html、css、javascript没有响应