CSS两张图片切换效果 在网站开发中,常常需要为用户呈现多组图片,但过多的图片可能导致网站加载速度变慢,降低用户体验。为了解决这一问题,我们可以采取两张图片切换的方式,即只显示一张图片,用户点击后切换
<div class="img-box">
<img src="img1.jpg">
<img src="img2.jpg">
</div>
.img-box {
position: relative;
}
.img-box img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.img-box img:first-child {
opacity: 1;
}
var imgBox = document.querySelector('.img-box');
imgBox.addEventListener('click', switchImg);
function switchImg() {
var imgList = imgBox.querySelectorAll('img');
<br>
for (var i = 0; i < imgList.length; i++) {
var currentOpacity = imgList[i].style.opacity;
if (currentOpacity == '1') {
imgList[i].style.opacity = '0';
} else {
imgList[i].style.opacity = '1';
}
}
}
粉丝
0
关注
0
收藏
0