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 src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    3. <script>
    4.   var index=0;
    5.   $("#next").click(function(){
    6.          if(!$("#list>img").is(":animated")){
    7.       index++;
    8.       if(index>4){
    9.         index=0;
    10.       }
    11.       animate(index)
    12.     }
    13.   })
    14. $("#prev").click(function(){
    15.   if(!$("#list>img").is(":animated")){
    16.     index--;
    17.     if(index<0){
    18.       index=4;
    19.     }
    20.     animate(index)
    21.   }
    22. })
    23. $("#btns span").click(function(){
    24.   index=$(this).index();
    25.   animate(index)
    26. })
    28. function animate(index){
    29.   $("#list img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
    30.   $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
    31. }
    32. </script>