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

Summary of MySQL's commonly used concatenation statements

Preface: In MySQL, the CONCAT() function is used ...

Ubuntu 19.10 enables ssh service (detailed process)

It took me more than an hour to open ssh in Ubunt...

Implementing a web calculator based on JavaScript

This article shares the specific code of JavaScri...

The complete version of the common Linux tool vi/vim

Why learn vim Linux has a large number of configu...

SQL implementation of LeetCode (177. Nth highest salary)

[LeetCode] 177.Nth Highest Salary Write a SQL que...

Sample code for using CSS to write a textured gradient background image

The page length in the project is about 2000px or...

A brief discussion on the implementation of fuzzy query using wildcards in MySQL

In the MySQL database, when we need fuzzy query, ...

How to use jsx syntax correctly in vue

Table of contents Preface Virtual DOM What is Vir...

Summary of MySQL development standards and usage skills

1. Naming conventions 1. Database names, table na...

MySQL 8.0.15 installation and configuration graphic tutorial and password change under Linux

I wrote this blog to remember that I just install...

Vue implements the countdown component for second kills

This article shares the specific code of Vue to i...

Detailed explanation of the basic knowledge of front-end componentization

Table of contents Basic concepts of components Th...

Centos6.9 installation Mysql5.7.18 step record

Installation sequence rpm -ivh mysql-community-co...

Detailed tutorial on installing MySQL 8.0.19 in zip version on win10

Table of contents 1. After downloading, unzip it ...

Explanation of using if judgment conditions in sum and count functions when using SQL statements to collect data

First, let me give you an example (if you don’t w...