Using jquery to realize the effect of carousel map

Today, I share with you the effect of using jquery to realize carousel. I don't want to talk nonsense. I go directly to the code. Of course, every line of code will have comments, which is also easy to understand.

Step 1: Introduce the jquery file first

<script src="./jquery.js"></script>

Step 2: html Style

<div id="banner">
  <!--  Picture  -->
  <ul id="banner_img">
   <li>
    <img src="./img/1.jpg" alt="">
   </li>
   <li>
    <img src="./img/2.jpg" alt="">
   </li>
   <li>
    <img src="./img/3.jpg" alt="">
   </li>
   <li>
    <img src="./img/4.jpg" alt="">
   </li>
  </ul>
  <!--  Dot  -->
  <ul id="banner_yuandian">
   <li class="active">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
  </ul>
  <!-- < > The arrow points to  -->
  <button id="banner_back"><</button>
  <button id="banner_next">></button>
 </div>

Step 3: css Style

<style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
  #banner{
   position: relative;
  }
  /* Picture style  */
  #banner #banner_img{
   width: 300px;
   height: 300px;
   border: 2px red solid;
  }
  #banner #banner_img img{
   width: 300px;
   height: 300px;
  }
  #banner #banner_img>li{
   display: none;
  }
  #banner #banner_img :first-child{
   display:block;
  }
  /*  Dot pattern  */
  #banner_yuandian{
   position: absolute;
   bottom: 10px;
   display: flex;
   margin-left: 35px;

  }
  #banner_yuandian li{
   margin-left: 30px;
   width: 20px;
   height: 20px;
   border: 1px red solid;
   border-radius: 50%;
   text-align: center;
  }
  #banner_yuandian li:hover{
   background: orange;
  }
  #banner_yuandian .active{
   background: orange;
  }
  /*  Arrow style  */
  #banner_back{
   width: 30px;
   height: 30px;
   position: absolute;
   margin-top: -150px;
  }
  #banner_next{
   width: 30px;
   height: 30px;
   position: absolute;
   margin-top: -150px;
   margin-left: 273px;
  }
</style>

Step 4: js Style

<script>
  
  // Set the common subscript of pictures, dots and arrows   From 0 Begin 
  var index=0;

  // Encapsulate carousel functions   No. 1 1 Step 
  function show(){
   // Subscript each time +1 Increase 
   index+=1;
   // If the subscript is greater than or equal to the length of the picture, the 1 Graph, that is, subscript index=0 Just do it 
   if(index>=$("#banner_img>li").length){
    index=0;
   }

   // Jean li Click on each picture to show yourself, while other brothers hide it 
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   // The subscript of the dot also needs to be encapsulated 1 Lower style 
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
  
  }

  // Using timer to achieve carousel effect   No. 1 2 Step 
  var x=setInterval(show,2000);

  // Clear the timer when the mouse moves over the picture, and rejoin the timer after moving out 
  $("#banner_img>li").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
   }
  )


  // Dot setting, click the dot and switch the corresponding picture   No. 1 3 Step 
  $("#banner_yuandian>li").on("click",function(){
   // The subscript when clicking the dot takes the common subscript 
   var index=$(this).index();// Mistakes index() Grammar 

   // When you click the subscript, the corresponding picture will be displayed, and other brother pictures will be hidden 
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   // Click Dot, Add Style, Remove Others 
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
  
  })

  // Slide the mouse up and out to clear the timer and set the timer again   No. 1 4 Step 
  $("#banner_yuandian>li").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
   }
  )
   

  // Arrow setting   No. 1 5 Step 
  
  $("#banner_back").on("click",function(){
   // Click 1 Sub-subtraction 1
   index--;
   // The current is less than 0 Is returned to the 1 Map 
   if(index<0){
    index=0;
   }

   
   // When you click the subscript, the corresponding picture will be displayed, and other brother pictures will be hidden  
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   // Click Dot, Add Style, Remove Others 
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");

  })
  // Under 1 Zhang   You can call directly 
  $("#banner_next").on("click",function(){
   show();
  })

  // Click button Button to clear the timer again and add the timer 
  $("button").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
 }
)