Js实现轮播图代码生成
时间: 2023-06-07 16:06:51 浏览: 64
以下是一个简单的JavaScript实现的轮播图代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript轮播图</title>
<style type="text/css">
#slider {
width: 600px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
position: relative;
}
#slide-container {
width: 3000px;
position: absolute;
top: 0;
left: 0;
animation: slide 10s infinite;
}
.slide {
width: 600px;
height: 300px;
float: left;
}
#slide-1 {
background: url("slide-1.jpg") no-repeat center center;
background-size: cover;
}
#slide-2 {
background: url("slide-2.jpg") no-repeat center center;
background-size: cover;
}
#slide-3 {
background: url("slide-3.jpg") no-repeat center center;
background-size: cover;
}
@keyframes slide {
0% {
left: 0;
}
20% {
left: -600px;
}
40% {
left: -1200px;
}
60% {
left: -1800px;
}
80% {
left: -2400px;
}
100% {
left: -3000px;
}
}
</style>
</head>
<body>
<div id="slider">
<div id="slide-container">
<div class="slide" id="slide-1"></div>
<div class="slide" id="slide-2"></div>
<div class="slide" id="slide-3"></div>
</div>
</div>
</body>
</html>
```
该代码将三个不同的图片作为轮播项,并在10秒的时间内实现无限循环。您可以根据需要调整动画时间和图片数量。