Detailed explanation of the production principle of jQuery respiratory carousel map

2021-11-29 22:57:02
OfStack

In this paper, we share the specific process of the production principle of jQuery breathing carousel map for your reference. The specific contents are as follows

Carousel: carousel
Breathing carousel map variant layout key: all pictures stack 1.
jquery's ability to select elements is very good, but we are used to saving the elements used to variables in advance. Usually we use id to select elements. 1 We use $box.
Left and right buttons anti-hooligan strategy: When the picture moves, do not do any operation. is ()
Dot's anti-hooligan strategy: respond to new events immediately. stop (true)

Note: Images are replaced when using code, and jquery library needs to be introduced.

Examples:


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }
  ul, ol {
   list-style: none;
  }
  #carousel {
   position: relative;
   width: 900px;
   height: 540px;
   border: 1px solid #000;
   margin: 50px auto;
  }
  /* The key to the layout of breathing carousel is that all the pictures fall on 1 Rise */
  #carousel .imgs ul li {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   display: none;
  }
  #carousel .imgs ul li:first-child {
   display: block;
  }
  .btns a {
   position: absolute;
   width: 30px;
   height: 60px;
   top: 50%;
   margin-top: -30px;
   text-decoration: none;
   background-color: rgba(0, 0, 0, .5);
   line-height: 60px;
   text-align: center;
   font-size: 20px;
   color: #fff;
  }
  .btns a:first-child {
   left: 10px;
  }
  .btns a:last-child {
   right: 10px;
  }
  #carousel .circles {
   position: absolute;
   width: 200px;
   height: 20px;
   left: 50%;
   margin-left: -100px;
   bottom: 30px;
  }
  #carousel .circles ol {
   width: 210px;
  }
  #carousel .circles ol li {
   float: left;
   width: 20px;
   height: 20px;
   margin-right: 10px;
   background-color: blue;
   line-height: 20px;
   text-align: center;
   border-radius: 20px;
  }
  #carousel .circles ol li.cur {
   background-color: orange;
  }
 </style>
</head>
<body>
 <div id="carousel">
  <div class="imgs" id="imgs">
   <ul>
    <li><img src="images/aoyun/0.jpg" alt=""></li>
    <li><img src="images/aoyun/1.jpg" alt=""></li>
    <li><img src="images/aoyun/2.jpg" alt=""></li>
    <li><img src="images/aoyun/3.jpg" alt=""></li>
    <li><img src="images/aoyun/4.jpg" alt=""></li>
    <li><img src="images/aoyun/5.jpg" alt=""></li>
    <li><img src="images/aoyun/6.jpg" alt=""></li>
   </ul>
  </div>
  <div class="btns">
   <a href="#" id="leftBtn">&lt;</a>
   <a href="#" id="rightBtn">&gt;</a>
  </div>
  <div class="circles" id="circles">
   <ol>
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
   </ol>
  </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript">
 //  Get Element 
 var $leftBtn = $("#leftBtn");
 var $rightBtn = $("#rightBtn");
 var $imgs = $("#imgs ul li");
 var $circles = $("#circles ol li");
 var $carousel = $("#carousel");
 //  Definition length
 var length = $imgs.length;
 //  Defining Semaphore 
 var idx = 0;


 //  Start the timer 
 var timer = setInterval(change, 2000);


 //  Move the mouse into the stop timer 
 $carousel.mouseenter(function() {
  //  Clear timer 
  clearInterval(timer);
 })

 //  The mouse leaves and starts the timer again 
 $carousel.mouseleave(function() {
  //  Set the watch to close first 
  clearInterval(timer);
  //  Re-assignment timer
  timer = setInterval(change, 2000);
 })


 //  Right button event 
 $rightBtn.click(change);

 function change() {
  //  Anti-hooliganism 
  if ($imgs.is(":animated")) {
   return;
  }
  //  The current picture disappears 
  $imgs.eq(idx).fadeOut(600);

  //  Semaphore change 
  idx++;
  //  Boundary determination 
  if (idx > length - 1) {
   idx = 0;
  }

  //  Under 1 A picture fades in 
  $imgs.eq(idx).fadeIn(600);

  //  The current dot should be added cur
  $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
 }

 //  Left button event 
 $leftBtn.click(function() {
  //  Anti-hooliganism 
  if (!$imgs.is(":animated")) {

   //  The current picture disappears 
   $imgs.eq(idx).fadeOut(600);

   //  Semaphore change 
   idx--;

   //  Boundary determination 
   if (idx < 0) {
    idx = length - 1;
   }

   //  Under 1 A picture fades in 
   $imgs.eq(idx).fadeIn(600);

   //  Current dot plus cur
   $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
  }
 })



 //  Small dot event 
 $circles.mouseenter(function() {
  //  The current picture disappears 
  $imgs.eq(idx).stop(true).fadeOut(600);

  //  Change the semaphore 
  idx = $(this).index();

  //  Under 1 A picture appears 
  $imgs.eq(idx).stop(true).fadeIn(600);

  //  Current dot plus cur
  $(this).addClass("cur").siblings().removeClass("cur");
 })

 </script>
</body>
</html>