美文网首页
淡入淡出简易版

淡入淡出简易版

作者: 木头人美 | 来源:发表于2018-09-04 16:04 被阅读0次
再简单的东西,能自己写的还是自己写的,简易的实现淡入图片,后续再补充

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)

相关文章

网友评论

      本文标题:淡入淡出简易版

      本文链接:https://www.haomeiwen.com/subject/gnogwftx.html