html爱奇艺轮播图代码
时间: 2023-11-29 14:45:20 浏览: 120
以下是一个简单的HTML爱奇艺轮播图代码,使用了CSS样式来实现轮播图的效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>爱奇艺轮播图</title>
<style>
#banner {
width: 600px;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#banner ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 300%;
height: 100%;
animation: banner 15s infinite;
}
#banner li {
float: left;
width: 33.333%;
height: 100%;
background-size: cover; background-position: center;
}
#banner li:nth-child(1) {
background-image: url(https://picsum.photos/id/1015/600/300);
}
#banner li:nth-child(2) {
background-image: url(https://picsum.photos/id/1016/600/300);
}
#banner li:nth-child(3) {
background-image: url(https://picsum.photos/id/1018/600/300);
}
@keyframes banner {
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%;
}
}
</style>
</head>
<body>
<div id="banner">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
```