并没有js
时间: 2023-08-06 13:20:08 浏览: 29
非常抱歉,我看错了您的代码。如果你没有JavaScript代码,你可以尝试使用CSS实现轮播图。以下是一个简单的示例:
```html
<div class="carousel">
<img src="img/feng1.jpg" class="active">
<img src="img/feng2.jpg">
<img src="img/feng3.jpg">
</div>
```
```css
.carousel {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
display: flex;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
@keyframes carousel {
0% { transform: translateX(0); }
20% { transform: translateX(0); }
25% { transform: translateX(-100%); }
45% { transform: translateX(-100%); }
50% { transform: translateX(-200%); }
70% { transform: translateX(-200%); }
75% { transform: translateX(-300%); }
95% { transform: translateX(-300%); }
100% { transform: translateX(-400%); }
}
.carousel img:nth-child(1) {
animation: carousel 15s infinite;
}
.carousel img:nth-child(2) {
animation: carousel 15s infinite 5s;
}
.carousel img:nth-child(3) {
animation: carousel 15s infinite 10s;
}
```
这个CSS代码会让轮播图自动播放,每隔15秒切换一张图片。你可以修改`.carousel`和`.carousel img`的样式以适应你的需求,并且可以添加更多的图片元素来增加图片数量。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)