1.  <div class="content">
    2.         <div id="list">
    3.             <img src="images/01.png" alt="">
    4.             <img src="images/02.png" alt="">
    5.             <img src="images/03.png" alt="">
    6.             <img src="images/04.png" alt="">
    7.             <img src="images/05.png" alt="">
    8.         </div>
    9.         <button id="prev"></button>
    10.         <button id="next"></button>
    11.         <div id="btns">
    12.             <span class="current"></span>
    13.             <span></span>
    14.             <span></span>
    15.             <span></span>
    16.             <span></span>
    17.         </div>
    18.     </div>
    1.  <script>
    2.         var prev=document.getElementById("prev");
    3.         var next=document.getElementById("next");
    4.         var lists=document.querySelectorAll("#list>img");
    5.         var icons=document.querySelectorAll("#btns>span")
    6.         var index=0;   //记录下标
    7.         next.onclick=function(){
    8.             index++;
    9.             if(index>4){
    10.                 index=0;
    11.             }
    12.             show(index)
    13.         }
    14.         prev.onclick=function(){
    15.             index--;
    16.             if(index<0){
    17.                 index=4;
    18.             }
    19.             show(index)
    20.         }
    21.         /* 重置下标 */
    22.         for(let i=0;i<icons.length;i++){
    23.             icons[i].index=i;
    24.             icons[i].onclick=function(){
    25.                 let currentIndex=this.index;
    26.                 show(currentIndex)
    27.             }
    28.         }
    30.         /* 封装 */
    31.         function show(index){
    32.             for(let i=0;i<lists.length;i++){
    33.                 lists[i].style.display="none"
    34.             }
    35.             lists[index].style.display="block"
    37.             for(let i=0;i<icons.length;i++){
    38.                 icons[i].classList.remove("current")
    39.             }
    40.             icons[index].classList.add("current")
    41.         }
    42.     </script>