淡入淡出简易版

再简单的东西，能自己写的还是自己写的，简易的实现淡入图片，后续再补充

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)