写一个h5的轮播图
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<style>
.container {
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
<pre><code> .slider {
width: 3200px;
height: 400px;
position: absolute;
top: 0;
left: 0;
animation: slider 10s infinite;
}
.slider img {
width: 800px;
height: 400px;
float: left;
}
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -800px;
}
45% {
left: -800px;
}
50% {
left: -1600px;
}
70% {
left: -1600px;
}
75% {
left: -2400px;
}
95% {
left: -2400px;
}
100% {
left: -3200px;
}
}
</style>
</code></pre>
</head>
<body>
<div class="container">
<div class="slider">
<img src="https://picsum.photos/id/237/800/400">
<img src="https://picsum.photos/id/238/800/400">
<img src="https://picsum.photos/id/239/800/400">
<img src="https://picsum.photos/id/240/800/400">
</div>
</div>
</body>
</html>
<p>说明：</p>
<ol>
<li>在一个容器内设置两个元素，一个是轮播图的容器（container），一个是轮播图（slider）</li>
<li>设置容器的宽度和高度，以及相对位置和溢出隐藏</li>
<li>设置轮播图的宽度和高度、绝对位置和左上角对齐</li>
<li>给轮播图设置一个动画效果，每个图片停留5s（animation-duration），从左向右移动（left）</li>
</ol>
原文地址: https://www.cveoy.top/t/topic/np6 著作权归作者所有。请勿转载和采集!