原生轮播-淡入淡出型

csss

*{
            margin:0px;
            padding:0px;
            list-style:none;
        }
        .div_a{
            position: relative;
            margin: 100px auto;
            width: 384px;
            height: 240px;
            overflow: hidden;
        }
        .div_ul{
            width:384px;
            height:240px;
            position: absolute;
        }
        li{
            width:384px;
            height:240px;
            position: absolute;
            opacity: 0;
            transition: opacity 1.5s ease;
        }
        img{
            position: absolute;
            width: 100%;
            height:100%;
        }
        .show{
            opacity: 1;
        }
        .left,.right{
            width: 50px;
            height: 100px;
            font-size: 30px;
            position: absolute;
            top: 30%;
            z-index: 2;
            opacity: 0;
            text-align: center;
            line-height: 100px;
            transition: opacity .5s ease;
            background: rgba(0,0,0,0.3);
            cursor: pointer;
        }
        .left{
            left: 0;
        }
        .left:hover{
            opacity: .5;
        }
        .right{
            right: 0;
        }
        .right:hover{
            opacity: .5;
        }
        .dian{
            position: absolute;
            z-index: 2;
            bottom: 20px;
            width: 100%;
            height: 16px;
            overflow: hidden;
            zoom: 1;
            text-align: center;
        }
        .dian>span{
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            border: 1px solid orangered;
            margin-right: 10px;
            font-size: 8px;
            cursor: pointer;
        }
        .on{
            background: orange;
        }

结构

1
2
3
4
5


![](img/img1.jpg)
![](img/img2.jpg)
![](img/img3.jpg)
![](img/img4.jpg)
![](img/img5.jpg)

＞
＜ 

js

function play(){
        timer = setInterval(fun,3000);
    }
    play()
    var num = 0;
    all_li = document.querySelectorAll(".div_ul>li")
    function fun(){
        num++;
        if(num>all_li.length-1){
            num=0
        }
        for(var i=0;ispan");
    for(var i=0;i