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

In-depth understanding of the specified IE browser rendering method

<meta http-equiv="X-UA-Compatible" c...

How to build mysql master-slave server on centos7 (graphic tutorial)

This article mainly introduces how to build a MyS...

Summary of Vue watch monitoring methods

Table of contents 1. The role of watch in vue is ...

A brief discussion on simulating multi-threaded and multi-process crashes in Linux

Conclusion: In a multithreaded environment, if on...

CSS shadow animation optimization tips

This technique comes from this article - How to a...

SQL Server Comment Shortcut Key Operation

Batch comments in SQL Server Batch Annotation Ctr...

Comparing Document Locations

<br />A great blog post by PPK two years ago...

MySQL FAQ series: When to use temporary tables

Introduction to temporary tables What is a tempor...

Vue project implements file download progress bar function

There are two common ways to download files in da...

CocosCreator classic entry project flappybird

Table of contents Development Environment Game en...

Introduction to the use of data custom attributes in HTML and plug-in applications

You may often see some HTML with data attributes. ...

Steps to create a CentOS container through Docker

Table of contents Preface Create a bridge network...

Linux operation and maintenance basic process management real-time monitoring and control

Table of contents 1. Background running jobs 2. U...

Summary of js execution context and scope

Table of contents Preface text 1. Concepts relate...

Summary of JavaScript Timer Types

Table of contents 1.setInterval() 2.setTimeout() ...