jQuery achieves breathing carousel effect

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

Recommend

How to use a field in one table to update a field in another table in MySQL

1. Modify 1 column update student s, city c set s...

React realizes secondary linkage effect (staircase effect)

This article shares the specific code of React to...

Professional MySQL development design specifications and SQL writing specifications

In the process of team development, it is essenti...

Solve the problem of specifying udp port number in docker

When Docker starts a container, it specifies the ...

How to monitor array changes in Vue

Table of contents Preface Source code Where do I ...

Methods for deploying MySQL services in Docker and the pitfalls encountered

I have been learning porters recently. I feel lik...

Vue Element front-end application development table list display

1. List query interface effect Before introducing...

vue.js Router nested routes

Preface: Sometimes in a route, the main part is t...

JS implements dragging the progress bar to change the transparency of elements

What I want to share today is to use native JS to...

How to view the network routing table in Ubuntu

What are Routing and Routing Table in Linux? The ...

Several principles for website product design reference

The following analysis is about product design pr...

Vue Beginner's Guide: Environment Building and Getting Started

Table of contents Initial Vue Building a Vue deve...

How MLSQL Stack makes stream debugging easier

Preface A classmate is investigating MLSQL Stack&...

HTML table tag tutorial (35): cross-column attribute COLSPAN

In a complex table structure, some cells span mul...

Detailed explanation of adding security group rules to Alibaba Cloud Server (graphic tutorial)

Overview of Alibaba Cloud Security Group Sharing ...