再简单的东西,能自己写的还是自己写的,简易的实现淡入图片,后续再补充
1:css
.banner {
height: 1070px;
position: relative;
}
.banner img {
transition: all 0.8s;
position: absolute;
left: 0;
top: 0;
}
.hide {
opacity: 0.1;
}
.show {
opacity: 1;
}
2:html
<div class="banner">
<img src="http://pic.caigoubao.cc/607118/veer-159497091.jpg
" width="100%" height='100%' />
<img src=http://pic.caigoubao.cc/607118/veer-312904229.jpg
" width="100%" height='100%'/>
</div>
3:js
let banner = document.querySelectorAll('.banner img')
let num = 0;
setInterval(function() {
num++;
if(num == banner.length) {
num = 0;
}
for(let t = 0; t < banner.length; t++) {
banner[t].className = 'hide'
}
banner[num].className = 'show'
}, 2000)
网友评论