如何解决如何将图像添加到此滑块?
我发现了这个很棒的全屏宽度循环自动播放滑块,但它只适用于 4 个图像。我将如何调整百分比以增加到 7 张图像?对不起,如果这是一个简单的想法,但我是一个完全的初学者,并且对为什么这段代码的工作方式只有基本的了解。
<!DOCTYPE html>
<html>
<head>
<title>My Slider</title>
<style>
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
</style>
</head>
<body>
<div id="slider">
<figure>
<img src="images/C01.jpeg" alt>
<img src="images/C02.jpeg" alt>
<img src="images/C03.jpeg" alt>
<img src="images/C04.jpeg" alt>
<img src="images/C01.jpeg" alt>
</figure>
</div>
</body>
</html>
谢谢, 安倍
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。