js淡入淡出轮播图原理就是每次给当前图片的下一张添加opacity属性值为1然后其他图片的opacity为0并且加上一个css3的过度效果transition属性使其实现淡入淡出的效果

HTML：

<div id="content-1">
          <ul class="ul-1">
              <!--图片区域-->
              <li class="li-1 active"></li>
  
              <li class="li-1"></li>
  
              <li class="li-1"></li>
  
              <li class="li-1"></li>
  
              <li class="li-1"></li>
          </ul>
          <ul id="ul-2">
              <!--小圈圈区域-->
              <li class="circle styles" data-index="0"></li>
  
              <li class="circle" data-index="1"></li>
  
              <li class="circle" data-index="2"></li>
  
              <li class="circle" data-index="3"></li>
  
              <li class="circle" data-index="4"></li>
          </ul>
      </div>

这里是给图片布局（我使用的是背景图所以在li表情中没显示），并且下面的ul是浮动上去会使指定的图片淡入显示，我使用了data-index自定义属性去关联图片li标签的下标

CSS：

          * {
              margin: 0;
              padding: 0;
          }
          
          #content-1 {
              position: relative;
              width: 70%;
              height: 600px;
              left: 300px;
          }
          
          .ul-1 {
              width: 100%;
              height: 600px;
              position: relative;
              list-style: none;
          }
          
          .li-1 {
              width: 100%;
              height: 100%;
              position: absolute;
              color: white;
              font-size: 70px;
              opacity: 0;
              transition: all 0.7s;
              background-size: 100%;
          }
          
          .li-1:nth-child(1) {
              background: url("timg (6).jpg") no-repeat;
              background-size: 100%;
          }
          
          .li-1:nth-child(2) {
              background: url("timg (1).jpg") no-repeat;
              background-size: 100%;
          }
          
          .li-1:nth-child(3) {
            background: url("timg (8).jpg") no-repeat;
              background-size: 100%;
          }
          
          .li-1:nth-child(4) {
            background: url("timg (4).jpg") no-repeat;
              background-size: 100%;
          }
          
          .li-1:nth-child(5) {
            background: url("timg (5).jpg") no-repeat;
              background-size: 100%;
          }
          
          .li-1.active {
              z-index: 888;
              opacity: 1;
              background-size: 100%;
          }
          /*五个圆圈*/
          #ul-2 {
              position: absolute;
              top: 80%;
              left: 40%;
              z-index: 1000;
              list-style: none;
          }
          .circle {
              width: 12px;
              height: 12px;
              margin-left: 20px;
              float: left;
              border: 3px solid white;
              border-radius: 100%;
              background: rgb(112, 110, 111);
              cursor: pointer;
              transition: all 0.5s;
          }
          .circle.styles {
              background: white;
          }

用css的绝对定位把所有的图片都重叠在了一起，并且运用了z-index属性使得显示的那张图片在最上面

JS：

这里是获取图片的li标签和下面的圆圈的li标签，以及声明一个index变量使得图片得以动起来，还有声明一个空变量timer使定时器不会出现重复

    var li = document.getElementsByClassName("li-1"); //图片
          var circles = document.getElementsByClassName("circle"); //获取圆圈
          
          var index = 0;
          var timer;

这里是为了方便下面调用定时器以及放入小圈圈时给图片添加和圈圈添加样式

  //清空样式
          function clearli() {
              for (var i = 0; i < li.length; i++) {
                  li[i].className = "li-1";
                  circles[i].className = "circle";
              }
          }
 //添加样式
          function goindex() {
              clearli();
              li[index].className = "li-1 active";
              circles[index].className = "circle styles";
          }

这里是声明了个函数并且创建了一个定时器使得index每动一次时加1当index等于4时归零并且没此调用添加样式，使得实现动态的淡入淡出显示

 //轮播图自动播放
          function zd(){
            timer = setInterval(function(){
            if (index == 4) {
                index = 0;
              } else{
                index++;
              }
              goindex();
            },2000)
          }

这里是使下面的圈圈与图片关联在一起，只要滑入到哪个圈圈上，就获取当前圈圈的data-index的值，使得index等于data-index的值并且调用添加圈圈的样式和清除掉定时器，划出之后就调用定时器，使其再次动起来

          //小圆圈的样式和图片切换
          for (a = 0; a < circles.length; a++) {
            circles[a].onmousemove=function(){
              var data_index = this.getAttribute("data-index");
              index = data_index;
              goindex();
              clearInterval(timer);
            }
            circles[a].onmouseout=function(){
              zd();
            }
          }

效果：