css如何实现图片的切换
时间: 2024-01-24 07:04:13 浏览: 28
有多种方法可以实现图片的切换,以下是其中两种比较常见的方法:
1. 使用CSS的background属性,通过切换背景图片实现切换效果。
HTML代码:
```
<div class="image"></div>
<button onclick="changeImage()">切换图片</button>
```
CSS代码:
```
.image {
width: 300px;
height: 200px;
background-image: url('image1.jpg');
background-size: cover;
}
.image.active {
background-image: url('image2.jpg');
}
```
JavaScript代码:
```
function changeImage() {
var image = document.querySelector('.image');
image.classList.toggle('active');
}
```
2. 使用CSS的visibility属性或opacity属性,通过切换图片的可见性或透明度实现切换效果。
HTML代码:
```
<div class="image">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
</div>
<button onclick="changeImage()">切换图片</button>
```
CSS代码:
```
.image img {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}
.image img.active {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
```
JavaScript代码:
```
function changeImage() {
var images = document.querySelectorAll('.image img');
images.forEach(function(image) {
image.classList.toggle('active');
});
}
```