1.动态生成原生轮播

css

        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
    .box{
        width: 600px;
        height: 400px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
   ul{
       float: left;
     width: 600%;
     height:400px;
   }
   ul>li{
    float: left;
    display: none;
   }
   ol{
    position: absolute;
       bottom:20px;
       right: 50%;
       transform: translateX(50%);
   }
   ol>li{
    display: inline-block;
      cursor: pointer;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: rgba(44,44,44,.3);
      border: 1px solid #fff;
   }
   .current{
       background-color: #ff4500;
   }
   #arrow_l,#arrow_r{
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 40px;
    height: 70px;
    background: url(./images/icon-slides.png);
    border: none;
  } 
   #arrow_l{
    background-position-x: -86px;
   }
   #arrow_r{
    right: 0;
    background-position-x: -125px;
   }

html

    <div class="box">
         <button id="arrow_l"></button>
         <button id="arrow_r"></button>
         <ul>
             <li style="display: block;"><img src="./images/01.png" alt=""></li>
             <li><img src="./images/02.png" alt=""></li>
             <li><img src="./images/03.png" alt=""></li>
             <li><img src="./images/04.png" alt=""></li>
             <li><img src="./images/05.png" alt=""></li>
         </ul>
     <ol class="circle">
     </ol>    
     </div>

js

 <script>
      var list=document.querySelectorAll("ul>li");
      var ol=document.querySelector(".circle");
      var arrow_r=document.querySelector("#arrow_r");
      var arrow_l=document.querySelector("#arrow_l");
     var count=0;
     var circle=0;
        arrow_r.onclick=function(){
         if(count<list.length-1){
            count++;
         }else{
             count=0;
         } 
          for(var i=0;i<list.length;i++){
              list[i].style.display="none";
          }
          list[count].style.display="block"
          if(circle==ol.children.length-1){
              circle=0;
          }else{
            circle++;
          }
          for(var i=0;i<ol.children.length;i++){
              ol.children[i].className="";
          }
          ol.children[circle].className="current";
     }
     arrow_l.onclick=function(){
         if(count<=0){
             count=list.length-1;
         }else{
            count--;
         }
          for(var i=0;i<list.length;i++){
              list[i].style.display="none";
          }
          list[count].style.display="block"
     }
    setInterval(function(){
        arrow_r.click();
    },2000)
      for(var i=0;i<list.length;i++){
          var li= document.createElement("li");
          ol.appendChild(li);
          ol.children[i].setAttribute("index",i);
          ol.children[i].onclick=function(){
              for(var i=0;i<ol.children.length;i++){
                  ol.children[i].className="";
                  list[i].style.display="none";
              }
              this.className="current";
              var index=this.getAttribute("index");
             list[index].style.display="block";
          }
      }
      ol.children[0].className="current";
     </script>