css轮播图
时间: 2023-07-25 09:04:20 浏览: 71
CSS 轮播图一般使用 CSS3 中的动画属性实现。以下是一个简单的 CSS 轮播图的示例:
HTML 代码:
```html
<div class="slider">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
```
CSS 代码:
```css
.slider {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: all 1s ease-in-out;
}
.slide1 {
background-image: url('slide1.jpg');
background-size: cover;
background-position: center;
}
.slide2 {
background-image: url('slide2.jpg');
background-size: cover;
background-position: center;
}
.slide3 {
background-image: url('slide3.jpg');
background-size: cover;
background-position: center;
}
.slide.active {
opacity: 1;
}
```
JavaScript 代码:
```javascript
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 3000);
function nextSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
}
```
注释:上述代码会自动轮播图片,每张图片停留 3 秒。可以通过调整 CSS 和 JavaScript 代码来适应不同的需求。
相关推荐
![](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)