原生轮播-淡入淡出型

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;
        }

结构

<div class="div_a">
<div class="dian">
<span class="on">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<ul class="div_ul">
<li class="show">![](img/img1.jpg)</li>
<li>![](img/img2.jpg)</li>
<li>![](img/img3.jpg)</li>
<li>![](img/img4.jpg)</li>
<li>![](img/img5.jpg)</li>
</ul>
<div class="right">＞</div>
<div class="left">＜ </div>
</div>

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;i<all_li.length;i++){
            all_li[i].className="";
        }
        all_li[num].className = "show"
        clear_dian(num)
    }
    function zuo(){
        num--;
        if(num<0){
            num=all_li.length-1
        }
        for(var i=0;i<all_li.length;i++){
            all_li[i].className="";
        }
        all_li[num].className = "show"
        clear_dian(num)
    }
    //鼠标移入div,清除定时器,左右两边箭头显示
    left = document.querySelector(".left")
    right = document.querySelector(".right")
    div_a = document.querySelector(".div_a");
    div_a.onmouseenter = function(){
        left.style.opacity = 1
        right.style.opacity = 1
        clearInterval(timer)
    }
    div_a.onmouseleave = function(){
        play()
        left.style.opacity = 0
        right.style.opacity = 0
    }
    //点击左右箭头切换
    left.onclick=function(){
        zuo()
    }
    right.onclick=function(){
        fun()
    }
    //点击圆点的时候切换
    all_dian = document.querySelectorAll(".dian>span");
    for(var i=0;i<all_dian.length;i++){
        all_dian[i].index = i;
        all_dian[i].onclick = function(){
            clear_dian(this.index)
            visible(this.index)
        }
    }
    //清除所有圆点的样式
    function clear_dian(num){
        for(var x = 0;x<all_dian.length;x++){
            all_dian[x].className = ""
        }
        all_dian[num].className = "on"
    }
    //点击那个就让那个显示
    function visible(index){
        num = index;
        for(var i=0;i<all_li.length;i++){
            all_li[i].className="";
        }
        all_li[index].className = "show"
    }

    //          img = document.querySelectorAll("img")
    //              img[0].addEventListener("onclick",function(){
    //                  console.log(1)
    //              },true)