Realizing the effect of carousel based on jQuery

Realizing the effect of carousel based on jQuery

This article shares the specific code of jQuery to achieve the effect of the carousel map for your reference. The specific content is as follows

Schematic diagram of left switch of carousel

The yellow box represents slides, and slide represents the parent of all slides. Each gray box represents each slide.

<div id="slides">
 <div id="slide">
 <div></div>
 <div></div>
 <div></div>
 </div>
</div>

For step 1, we must first use the overflow property in CSS to hide the box behind firstDiv. If we don’t do this, then obviously the image behind will be displayed, and we won’t achieve the desired effect.

For step 2, we can divide it into the following steps:

1. Move the parent slide of all carousel images to the left
2. Delete the first son in slide slideslide
3. Add the first son to the tail of the son in the slide. Repeat step 2 each time you click the leftMove button to achieve the left move effect.

Schematic diagram of right switching of the carousel

The execution steps of rightMove are:

1. Delete the last son
2. Add the last son to the head
3. Move slide right slideslide (i.e. set the left of slide to 0)

Implementation Code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>Document</title>
 <style>
 #container {
 position: relative;
 width: 200px;
 height: 100px;
 background: #000;
 overflow: hidden;
 display: inline-block;
 }
 #container .img {
 position: absolute;
 width: inherit;
 height: inherit;
 } 
 #container .img > div {
 position: absolute;
 width: inherit;
 height: inherit;
 color: #fff;
 }
 #container .img > div:first-child {
 left: 0;
 }
 #container .img > div:nth-child(2) {
 left: 100%;
 }
 #container .img > div:last-child {
 left: 200%;
 }
 #container .img > div img {
 width: 200px;
 height: 100px;
 }
 </style>
</head>
<body>
 <button id="prev"><</button>
 <div id="container">
 <div class="img">
 <div><img src="img/1.jpg"></div>
 <div><img src="img/2.jpg"></div>
 <div><img src="img/3.jpg"></div>
 </div>
 </div>
 <button id="next">></button>
 <script src="js/jquery.js"></script>
 <script>
 function imgLeftMove() {
 $(".img").animate({
 left:"-=200"
 }, 1000, function() {
 // Delete the first image and add it to the end of the image $( $(".img > div")[0] ).remove().appendTo( $(".img") );
 // Set the div's left to 0
 $( $(".img") ).css("left", "0px");
 });
 }
 
 function imgRightMove() {
 // Delete the last image and add it to the image header $(".img > div").last().remove().prependTo( $(".img") );
 // Set the div left to -200px
 $(".img").css("left", "-200px");
 $(".img").animate({
 left: "0px"
 }, 1000);
 }
 
 $("#prev").click(imgLeftMove);
 $("#next").click(imgRightMove);
 
// setInterval(imgLeftMove, 3000);
 </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:
  • jQuery implements carousel map detailed explanation and example code
  • Using jQuery to write left and right carousel effects
  • jQuery implements seamless left and right carousel
  • jQuery plugin slides to achieve seamless carousel effects
  • jQuery implements carousel chart and its principle detailed explanation
  • jQuery adaptive carousel plug-in Swiper usage example
  • jQuery implements left and right sliding carousel
  • JQuery and html+css to achieve a carousel with small dots and left and right buttons
  • Simple carousel function implemented by jQuery [suitable for beginners]
  • Implementing fade-in and fade-out effect carousel based on jQuery

<<:  How to manually build a new image with docker

>>:  Basic commands for MySQL database operations

Recommend

LinkedIn revamps to simplify website browsing

Business social networking site LinkedIn recently...

Detailed explanation of Javascript closures and applications

Table of contents Preface 1. What is a closure? 1...

Example code for converting html table data to Json format

The javascript function for converting <table&g...

How to directly access the docker for windows container intranet through an independent IP

Docker officially recommends that we use port map...

Detailed analysis of the difference between Ref and Reactive in Vue3.0

Table of contents Ref and Reactive Ref Reactive T...

Practical MySQL + PostgreSQL batch insert update insertOrUpdate

Table of contents 1. Baidu Encyclopedia 1. MySQL ...

CSS specification BEM CSS and OOCSS sample code detailed explanation

Preface During project development, due to differ...

How to use regular expressions to automatically match wildcard domain names in nginx

Nginx uses regular expressions to automatically m...

The Complete Guide to Grid Layout in CSS

Grid is a two-dimensional grid layout system. Wit...

View MySQL installation information under Linux server

View the installation information of mysql: #ps -...

React implements dynamic pop-up window component

When we write some UI components, if we don't...

Detailed explanation of the processing of the three Docker Nginx Logs

Because colleagues in the company need Nginx log ...

Recommended 20 best free English handwriting fonts

Jellyka BeesAntique Handwriting [ank]* Jellyka Cut...

How to handle the failure of inserting rare characters in MySQL (Incorrect string value)

Recently, the business side reported that some us...

Looping methods and various traversal methods in js

Table of contents for loop While Loop do-while lo...