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

In-depth understanding of Mysql logical architecture

MySQL is now the database used by most companies ...

How to handle forgotten passwords in Windows Server 2008 R2

What to do if you forget Windows Server 2008R2 So...

HTML realizes real-time monitoring function of Hikvision camera

Recently the company has arranged to do some CCFA...

32 Typical Column/Grid-Based Websites

If you’re looking for inspiration for columnar web...

JavaScript operation element examples

For more information about operating elements, pl...

How to install JDK and Mysql on Ubuntu 18.04 Linux system

Platform deployment 1. Install JDK step1. Downloa...

Web Design Experience: Efficiently Writing Web Code

Originally, this seventh chapter should be a deep ...

Three ways to create a gray effect on website images

I’ve always preferred grayscale images because I t...

Nginx prohibits direct access via IP and redirects to a custom 500 page

Directly to the configuration file server { liste...

Linux implements the source code of the number guessing game

A simple Linux guessing game source code Game rul...

Detailed explanation of Strict mode in JavaScript

Table of contents Introduction Using Strict mode ...

The process of installing Docker on Windows Server 2016 and the problems encountered

Prerequisites To run containers on Windows Server...

Summary of 6 solutions for implementing singleton mode in JS

Preface Today, I was reviewing the creational pat...

Detailed steps to modify MySQL stored procedures

Preface In actual development, business requireme...

Detailed explanation of JDBC database link and related method encapsulation

Detailed explanation of JDBC database link and re...