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

A brief discussion on the mysql execution process and sequence

Table of contents 1:mysql execution process 1.1: ...

Native js realizes the drag and drop of the nine-square grid

Use native JS to write a nine-square grid to achi...

An article teaches you to write clean JavaScript code

Table of contents 1. Variables Use meaningful nam...

Solve the problem of VScode configuration remote debugging Linux program

Let's take a look at the problem of VScode re...

WiFi Development | Introduction to WiFi Wireless Technology

Table of contents Introduction to WiFi Wireless T...

Detailed explanation based on event bubbling, event capture and event delegation

Event bubbling, event capturing, and event delega...

Html comments Symbols for marking text comments in Html

HTML comments, we often need to make some HTML co...

How to use Docker Compose to implement nginx load balancing

Implement Nginx load balancing based on Docker ne...

Docker Basic Tutorial: Detailed Explanation of Dockerfile Syntax

Preface Dockerfile is a script interpreted by the...

Getting Started Tutorial for Beginners ④: How to bind subdirectories

To understand what this means, we must first know ...

VMware pro15 installation macOS10.13 detailed installation diagram (picture and text)

The editor recently wanted to get started with th...

Analyze several common solutions to MySQL exceptions

Table of contents Preface 1. The database name or...

How to perform query caching in MySQL and how to solve failures

We all know that we need to understand the proper...

Best Practices for Implementing Simple Jira Projects with React+TS

A set of projects for training react+ts Although ...

5 basic skills of topic page design (Alibaba UED Shanmu)

This topic is an internal sharing in the second h...