jQuery achieves breathing carousel effect

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

Probably the idea:

A breathing carousel is a carousel where images fade in and out.
Store ul in div (set relative positioning), li does not need float: left, just set absolute positioning. left:0, top:0.
At this time, there is no need to add false 0 after all the pictures.
The div also includes left and right buttons and the small dots below. They can be positioned to the appropriate positions through absolute positioning.
Set index to 0. When you click the right button, the current image fades out, index++. When the image is the last one, index is set to 0 and the new image fades in. The small dots below correspond to the colors.
The left button idea is much the same.
When the small picture below is clicked, if the clicked index is the same as the currently displayed index, nothing needs to be done.
When you click on other dots, the old image fades out, the index of the current dot is assigned to the global variable index, and the new image fades in.
The clicked dot changes color, while its sibling elements remain in their original color.

program:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .big{
        width:560px;
        height:300px;
        position: relative;
        margin:200px auto;
        border:10px solid red;
    }
    .big .move{
        width:5600px;
        height:300px;
        position: absolute;
        left:0;
        top:0;
    }
    .big .move li{
        /*float: left;*/
        list-style: none;
        display: none;
        position: absolute;
        top:0;
        left:0;
    }
    .big ul .first{
        display: block;
    }
    img{
        width:560px;
        height:300px;
    }

    .btn div{
        width:40px;
        height:60px;
        background: red;
        position: absolute;
        top:50%;
        margin-top:-30px;
    }
    .rightbtn{
        right:0;
    }

    .circle{
        position: absolute;
        left:0px;
        bottom:0px;
        width:200px;
        height:30px;

    }
    .circle ul{
        /*overflow: hidden;*/
        list-style: none;
        float: left;
    }
    .circleUl li{
        background: white;
        float: left;
        margin-right:10px;

        width:20px;
        height:20px;
        border-radius:50%;
    }


</style>
<body>
<div class="big">

    <ul class="move">
        <li class="first"> <img src="img/0.jpg" alt=""> </li>
        <li> <img src="img/1.jpg" alt=""> </li>
        <li> <img src="img/2.jpg" alt=""> </li>
        <li> <img src="img/3.jpg" alt=""> </li>
    </ul>

    <div class="btn">
        <div class="leftbtn"> < </div>
        <div class="rightbtn"> > </div>
    </div>

    <div class="circle">
        <ul class="circleUl">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</div>


<script src="js/jquery-1.12.3.min.js"> </script>

<script>
// Set the first dot to red $(".circleUl li").eq(0).css("background","red");

    var index = 0;
    $(".leftbtn").click(function(){
// fade out the old image $(".move li").eq(index).fadeOut(400);
        index--;
      if(index<0){
          index = 3;
      }
// New image fades in $(".move li").eq(index).fadeIn(400);
// Change the color of the small dot corresponding to index$(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
    });


    $(".rightbtn").click(function(){
        $(".move li").eq(index).fadeOut(400);
        index++;
        console.log(index);
        if(index == 4 ){
            index = 0;
        }
        $(".move li").eq(index).fadeIn(400);
        $(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
    });


// Small dot click event $(".circleUl li").click(function(){
// If the first dot is clicked again while the first picture is already displayed, nothing will be done if(index == $(this).index()) return;

// The old image fades out $(".move li").eq(index).fadeOut(400);

// Click on a dot and assign the index of the dot to the global variable index (update the global variable index)
        index = $(this).index();

        // New image fades in $(".move li").eq(index).fadeIn(400);
// Small dots change color$(this).css("background","red").siblings().css("background","white");



    })
</script>

</body>
</html>

Running results:

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 breathing carousel
Native JS to implement breathing carousel

<<: Solution to MySQL master-slave delay problem

>>: XHTML Getting Started Tutorial: XHTML Web Page Image Application

The actual process of implementing the guessing number game in WeChat applet

jQuery achieves breathing carousel effect

The actual process of implementing the guessing number game in WeChat applet

The effect of zooming in on a Taobao store is similar to the principle of using a slideshow.

Steps to completely uninstall the docker image

How to configure Bash environment variables in Linux

Summary of CJK (Chinese, Japanese, and Korean Unified Ideographs) Characters in Unicode

MySQL transaction concepts and usage in-depth explanation

jQuery plugin to achieve code rain effect

JavaScript generates random graphics by clicking

Will CSS3 really replace SCSS?

Detailed explanation of HTML element height, offsetHeight, clientHeight, scrollTop, etc.

Recommend

How to create your own image using Dockerfile

How to implement web stress testing through Apache Bench

Implementation of CSS linear gradient concave rectangle transition effect

Vue implements two-way data binding

Detailed tutorial on deploying Hadoop cluster using Docker

Vue implements automatic jump to login page when token expires

Solution to the problem that Docker container cannot be stopped or killed

Linux Disk Quota Management Graphical Example

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

Docker deploys mysql to achieve remote connection sample code

The difference and usage of single-line and double-line layout in Flex mobile layout

Examples of the correct way to use AES_ENCRYPT() and AES_DECRYPT() to encrypt and decrypt MySQL

Solutions to MySQL batch insert and unique index problems

How to use tinymce in vue3.0+ and implement the function of uploading multiple images and file upload formula editing

The difference between HTML iframe and frameset_PowerNode Java Academy