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