透明轮播图

透明轮播图

透明图片轮播图 将所有图片叠在一起，显示哪个，那个对应的透明度变成1

淡入从0到1 淡出从1到0

css样式

 <style>
        * {margin:0; padding:0;}
        ul {list-style: none;}
        img {
            vertical-align: top;  /*除去 图片底部有3像素空白缝隙的问题 */
        }
        .box {
            width: 490px;
            height: 170px;
            margin:100px auto;
            border: 1px solid #ccc;
            padding: 5px;
        }
        .inner {
            width: 490px;
            height: 170px;
            background-color: pink;
            position: relative;
            overflow: hidden;
        }
        .inner ul {
            width: 500%;
            position: absolute;
        }
        .inner ul li {
            /* float: left; */
            position: absolute;
        }
        .square {
            position: absolute;
           right: 10px;
            bottom:10px;
        }
        .square span {
            display: inline-block;
            width: 16px;
            height: 16px;
            border:1px solid #ccc;
            background-color: #fff;
            text-align: center;
            line-height: 16px;
            margin: 0 3px;
            cursor: pointer;
        }
        .square span.current {
            background-color: darkorange;
            color: white;
        }
    </style>

1.建立一个大盒子

1.1里面加一个小盒子然后放图片

2.获取所有的li

 var liList = document.getElementsByTagName('li')
    let i = 0   下标为0 第一张

3.准备定时器

setInterval(() => {
        i++
        if(i>4){ //如果为最后一张 变成第一个张
            i = 0
        }
        //遍历所有的li
        for(var li of liList){
            li.style.opacity = 0 //将所有的li变成透明的
        }
        //控制对应的li透明度变为1
        liList[i].style.opacity = 1
    }, 2000);//轮播时间