Detailed explanation of the production principle of jQuery breathing carousel

Detailed explanation of the production principle of jQuery breathing carousel

This article shares the specific process of the jQuery breathing carousel production principle for your reference. The specific content is as follows

Carousel: carousel
Key points of the breathing carousel variant layout: all the pictures are stacked together.
jQuery's ability to select elements is very good, but we are used to saving the elements we are going to use into variables in advance. Usually we use id to select elements. Usually we use $box.
The strategy to prevent left and right buttons from being rogue: when the picture is moving, no operation will be performed. is()
Dot's anti-rogue strategy: Respond to new incidents immediately. stop(true)

Note: When using the code, you need to replace the image and introduce the jQuery library.

Example:

<!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 the breathing carousel is to put all the pictures together*/
  #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 the element var $leftBtn = $("#leftBtn");
 var $rightBtn = $("#rightBtn");
 var $imgs = $("#imgs ul li");
 var $circles = $("#circles ol li");
 var $carousel = $("#carousel");
 // Define length
 var length = $imgs.length;
 // Define semaphore var idx = 0;


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


 //Mouse enter to stop timer$carousel.mouseenter(function() {
  // Clear the timer clearInterval(timer);
 })

 // Restart the timer when the mouse leaves$carousel.mouseleave(function() {
  // Set the table to close clearInterval(timer);
  // Reassign timer
  timer = setInterval(change, 2000);
 })


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

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

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

  // The next image fades in $imgs.eq(idx).fadeIn(600);

  // The current dot needs to add cur
  $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
 }

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

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

   // semaphore changes idx--;

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

   // The next image fades in $imgs.eq(idx).fadeIn(600);

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



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

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

  // The next picture appears $imgs.eq(idx).stop(true).fadeIn(600);

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

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

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Python optical simulation from Maxwell equations to wave equation vector algorithm understanding and learning
  • Python optical simulation learning diffraction algorithm preliminary understanding
  • Python optical simulation: understanding and learning of light interference
  • Summary of basic usage of matrices in Python numpy
  • Common matrix operations in Python (summary)
  • Python optical simulation understanding Jones matrix learning

<<:  Modify the maximum number of mysql connections and configuration files in docker

>>:  HTML table markup tutorial (48): CSS modified table

Recommend

Docker mounts local directories and data volume container operations

1. Docker mounts the local directory Docker can s...

Should I use distinct or group by to remove duplicates in MySQL?

Preface About the performance comparison between ...

Detailed explanation of the use of stat function and stat command in Linux

stat function and stat command Explanation of [in...

Implementing access control and connection restriction based on Nginx

Preface Nginx 's built-in module supports lim...

Common commands for deploying influxdb and mongo using docker

Deploy database based on docker sudo docker pull ...

Web design must also first have a comprehensive image positioning of the website

⑴ Content determines form. First enrich the conten...

Detailed explanation of Javascript event capture and bubbling methods

Table of contents 1. Event Processing Model 1. Ev...

Some "pitfalls" of MySQL database upgrade

For commercial databases, database upgrade is a h...

Two ways to install Python3 on Linux servers

First method Alibaba Cloud and Baidu Cloud server...

Detailed explanation of DBeaver connecting to MySQL version 8 and above and solving possible problems

Database MySQL version 8.0.18 Download a DBeaver....

React native ScrollView pull down refresh effect

This article shares the specific code of the pull...

JavaScript implementation of the Game of Life

Table of contents Concept Introduction Logical ru...

How to optimize MySQL query speed

In the previous chapters, we introduced how to ch...

MySQL multi-instance deployment and installation guide under Linux

What is MySQL multi-instance Simply put, MySQL mu...

Definition and function of zoom:1 attribute in CSS

Today I was asked what the zoom attribute in CSS ...