无自动播放效果

css

  1.     <style>
  2.         *{
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         li{
  7.             list-style: none;
  8.         }
  9.     .box{
  10.         width: 600px;
  11.         height: 400px;
  12.         margin: 0 auto;
  13.         position: relative;
  14.         overflow: hidden;
  15.     }
  16.    ul{
  17.        float: left;
  18.      width: 600%;
  19.      height:400px;
  20.    }
  21.    ul>li{
  22.     float: left;
  23.     display: none;
  24.    }
  25.    ol{
  26.     position: absolute;
  27.        bottom:20px;
  28.        right: 50%;
  29.        transform: translateX(50%);
  30.    }
  31.    ol>li{
  32.     display: inline-block;
  33.       cursor: pointer;
  34.       width: 20px;
  35.       height: 20px;
  36.       border-radius: 50%;
  37.       background-color: rgba(44,44,44,.3);
  38.       border: 1px solid #fff;
  39.    }
  41.    #arrow_l,#arrow_r{
  42.     position: absolute;
  43.     cursor: pointer;
  44.     top: 50%;
  45.     transform: translateY(-50%);
  46.     z-index: 100;
  47.     width: 40px;
  48.     height: 70px;
  49.     background: url(./images/icon-slides.png);
  50.     border: none;
  51.   } 
  52.    #arrow_l{
  54.     background-position-x: -86px;
  55.    }
  56.    #arrow_r{
  57.     right: 0;
  58.     background-position-x: -125px;
  59.    }
  60.    .current{
  61.        background-color: #ff4500;
  62.    }
  64.     </style>

html

  2.     <div class="box">
  3.         <button id="arrow_l"></button>
  4.         <button id="arrow_r"></button>
  5.         <ul>
  6.             <li style="display: block;"><img src="./images/01.png" alt=""></li>
  7.             <li><img src="./images/02.png" alt=""></li>
  8.             <li><img src="./images/03.png" alt=""></li>
  9.             <li><img src="./images/04.png" alt=""></li>
  10.             <li><img src="./images/05.png" alt=""></li>
  11.         </ul>
  12.     <ol class="circle">
  13.          <li class="current"></li>
  14.          <li></li>
  15.          <li></li>
  16.          <li></li>
  17.          <li></li>
  18.     </ol>    
  20.     </div>

js

  1.   <script>
  2.         var list=document.querySelectorAll("ul>li");
  3.         var ol=document.querySelectorAll("ol>li");
  4.         var arrow_l=document.querySelector("#arrow_l");
  5.         var arrow_r=document.querySelector("#arrow_r");
  6.         var count=0; 
  8.         function remove(){
  9.             for(var i=0;i<list.length;i++){
  10.                 list[i].style.display="none";
  11.             }
  12.             for(var i=0;i<ol.length;i++){
  13.                  ol[i].className="";
  14.           }
  15.         }
  16.         function add(){
  17.            remove();
  18.             list[count].style.display="block";
  19.             ol[count].className="cureent";
  20.         }
  21.         function towards(){
  22.             if(count==list.length-1){
  23.                 count=0
  24.             }else{
  25.                 count++;
  26.             }
  27.             add();
  28.         }
  29.         function aleft(){
  30.             if(count==0){
  31.                 count=list.length-1;
  32.             }else{
  33.                 count--;
  34.             }
  35.             add();
  36.         }
  37.         arrow_r.onclick=function(){
  38.             towards();
  39.         }
  40.         arrow_l.onclick=function(){
  41.             towards();
  42.         }
  44.         for(var i=0;i<ol.length;i++){
  45.             ol[i].setAttribute('index',i);    
  46.             ol[i].onclick=function(){
  48.                 aleft();
  51.             }
  53.         }
  54.     </script>