广告栏html,css几张照片轮换
时间: 2023-07-26 15:37:57 浏览: 39
好的,以下是一个简单的实现方式:
HTML代码:
```html
<div class="slideshow-container">
<div class="slideshow-image fade">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slideshow-image fade">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slideshow-image fade">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
```
CSS代码:
```css
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.slideshow-image {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from { opacity: .4 }
to { opacity: 1 }
}
```
JavaScript代码:
```javascript
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("slideshow-image");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // 切换时间间隔,单位为毫秒
}
```
以上代码实现了三张图片的轮换,每两秒自动切换一次。你可以根据需要修改图片数量和切换时间。
相关推荐
![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)