只放了一个img标签，切换图片通过修改img的src实现，这种情况下该如何做出过渡轮播的效果？

已经实现点击按钮切换图片和自动轮播的效果，现在只需要考虑过渡，谢谢大家！（如果解决了问题，可以加我微信，转账20元作为回报）

此处为目前的代码，本人小白，水平有限，见谅
HTML

 <div class="banner w">
      <ul class="img">
            <li><a href="#">![](./img/banner1.jpg)</a></li>
      </ul>
      <div class="dot-wrapper">
          <a href="#" class="dot"></a>
          <a href="#" class="dot"></a>
          <a href="#" class="dot"></a>
          <a href="#" class="dot"></a>
          <a href="#" class="dot"></a>
      </div>
      <div>
          <a href="#" class="prev"></a>
      </div>
      <div>
          <a href="#" class="next"></a>
      </div>
  </div>      

CSS

.banner{
    position: relative;
    height: 460px;
} 
.banner .img li{
    position: absolute;
}
.banner .banner-img{
    width: 100%;
}
.dot-wrapper{
    width: 80px;
    height: 10px;
    bottom: 22px;
    right: 35px;
    position: absolute;
}
.dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .4);
    border: 2px rgba(255, 255, 255, .4) solid;
    margin-left: 6px;
    float: left;
}
.active{
    border-color: rgba(0, 0, 0, .4);
    background-color:rgba(255, 255, 255, .4);    
}
.dot:hover{
    border-color: rgba(0, 0, 0, .4);
    background-color:rgba(255, 255, 255, .4);
}
.prev,.next{
    display: block;
    position: absolute;
    width: 41px;
    height: 69px;
    background-image: url(../img/icon-slides.png);
    top: 184px;
}
.prev{
    left: 233px;
    background-position: -83px;
}
.prev:hover{
    background-position: 0px;
}
.next{
    right: 0;
    background-position: -124px;
}
.next:hover{
    background-position: -41px;
}

JS

window.onload = function(){
    let prev = document.getElementsByClassName("prev")[0];
    let next = document.getElementsByClassName("next")[0];
    let img = document.getElementsByClassName("banner-img")[0];
    let dots = document.getElementsByClassName("dot");
    let imgArr = ["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg","img/banner4.jpg","img/banner5.jpg"];
    //banner的图片是下载的小米商城首页中间的轮播图片
    let index = 0;
    dots[index].className = "dot active"//让第一个导航点选中
    //点击按钮切换图片，改变导航点，设置过渡
    prev.onclick = function(){
        index--;
        if(index < 0){
            index = imgArr.length - 1;
        }
        img.className = "transition";
        img.src = imgArr[index];
        dots[index].className = "dot active";//让当前导航点选中
        if(index+1 <= dots.length-1){
            dots[index+1].className = "dot"
        }
        else{
            dots[0].className = "dot"
        }
        clearInterval(timer);//关闭之前的定时器(每次点击按钮时要重新开始计时)
        timer = autoRun();//设置新的定时器
    }
    next.onclick = function(){
        index++;
        if(index > imgArr.length -1){
            index = 0;
        }
        img.src = imgArr[index];
        dots[index].className = "dot active";//让当前导航点选中
        if(index-1 >= 0){
            dots[index-1].className = "dot"
        }
        else{
            dots[dots.length-1].className = "dot"
        }
        clearInterval(timer);//关闭之前的定时器
        timer = autoRun();//设置新的定时器
    }
    //点击导航点切换图片
    let tmp = 0;
    for(let i = 0;i < dots.length; i++){
        dots[i].onclick = function(){
            dots[index].className = "dot";
            //双变量方法：index是点击prev和next对应的图片编号，i是属于每个导航点的编号
            //不能在2个for循环内都用index，否则无法修改index，即最后一行的代码无法实现

            //先让index对应的导航点未选中
            dots[tmp].className = "dot";
            //tmp表示之前 通过点击导航点 而选中的导航点，让它未选中
            dots[i].className = "dot active";
            //让 最新一次点击的导航点 选中
            img.src = imgArr[i];
            //改变图片
            tmp = i;
            //更新tmp
            index = i;
            //修改index，否则再次点击prev或next时会出问题

            clearInterval(timer);//关闭之前的定时器
            timer = autoRun();//设置新的定时器
        }
    }
    timer = autoRun();

    img.style.transitionDuration = "1s";
    //图片的自动轮播函数
    function autoRun(){
        let timer = setInterval(function(){
            index++;
            if(index >= imgArr.length){
                index = 0;
                dots[dots.length-1].className = "dot";
            }
            else{
                dots[index-1].className = "dot";
            }
            img.src = imgArr[index];
            dots[index].className = "dot active";
        },5000);
        // let timer_ = transition();
        // img.style.opacity = 1;
        return timer;
        //timer封装在autoRun函数内，外层访问不到，必须返回timer，这样才能关闭定时器
    }
    //轮播的过渡效果，暂时想不出合适的解决方案
    }
}

过渡的核心是transition属性，而这个是针对css的其他属性的，既然你是要淡入淡出，那就是transition: opacity，所以你的代码里需要在切换的同时更改opacity；顺着这个思路去写你的逻辑，你的实现太乱了，这里给你示例一下，你再琢磨下修改下你的代码吧

//图片的自动轮播函数
    function autoRun(){
        let timer = setInterval(function(){
            index++;
            if(index >= imgArr.length){
                index = 0;
                dots[dots.length-1].className = "dot";
            }
            else{
                dots[index-1].className = "dot";
            }
            img.style.opacity = 0.1;
            setTimeout(() => {
              img.style.opacity = 1;
              img.src = imgArr[index];
            }, 1000)
            dots[index].className = "dot active";
        },5000);
        // let timer_ = transition();
        // img.style.opacity = 1;
        return timer;
        //timer封装在autoRun函数内，外层访问不到，必须返回timer，这样才能关闭定时器
    }

.banner .banner-img{
    width: 100%;
    transition: opacity 1s linear;
}

再提供一个思路，因为 img src 变化是不会有 transition 的所以你需要手动修改 opacity ，类似其他答主的回答，而 background-image 变化是可以有 fade-in fade-out 的效果的，那就可以用 div +background-image 来显示图片，然后给 background-image 来一个 CSS transition 就可以了。