jQuery implements a simple carousel effect

Hello everyone, today I will share with you the implementation of the carousel. Here is the effect of the carousel I made.

First we see that it is composed of a background image, a directional icon, and an indicator. We found that the background image, directional icons, and indicators are stacked together, so we have to use absolute positioning when laying them out. We want to achieve that when the direction icon is clicked, the image changes accordingly; when the indicator is clicked, the image changes accordingly; when not clicked, it automatically plays every 5 seconds; when not clicked, the direction icon does not appear.

Structural layout: Use one div to wrap three divs, and the three divs inside display the background image part, the direction icon part and the indicator part respectively.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/lunbotu.css" >
</head>
<body>
<!--The entire slideshow section-->
<div class="carousel">
    <!--Image background-->
    <div class="content">
        <ul>
            <li><a href=""><img src=" ./img/dj.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/ali.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/al.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/hml.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/yao.jpg" alt=""></a></li>
            <li><a href=""><img src=" ./img/xia.jpg" alt=""></a></li>
        </ul>
    </div>
    <!--Left and right move icons-->
    <div class="pos">
        <a href="" class=" left"><img src="./img/arrow-left.png" alt=""></a>
        <a href="" class=" right"><img src="./img/arrow-right.png" alt=""></a>
    </div>
    <!--Indicator-->
    <div class="dot">
        <ul>
            <li class="active"><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/lunbotu.js"></script>
</body>
</html>

Style code: You can design your own favorite color and style. Note that when using absolute positioning you must follow the principle of the son being the same as the father. If you want to display only one image on the interface, you can use overflow: hidden; to hide the excess part. After positioning, you can set top: 50%; transform: translateY(-50%); vertical center display: none;

/*Remove the style that comes with the tag*/
* {
    margin: 0;
    padding: 0;
}
 
ul {
    list-style: none;
}
 
a {
    text-decoration: none;
}
 
img {
    width: 100%;
}
/*Set the layout of the entire carousel*/
.carousel {
    position: relative;
    margin: 40px auto;
    width: 1000px;
    height: 460px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    /*Hide the excess part*/
    overflow: hidden;
}
/*Set the layout of the background image*/
.content {
    position: absolute;
    z-index: 1;
}
/*Set the layout of the left and right icons and indicators*/
.pos,
.dot {
    position: absolute;
    z-index: 2;
    width: 100%;
}
/*Set the left and right move icons to be vertically centered first and not displayed*/
.pos {
    top: 50%;
    transform: translateY(-50%);
    display: none;
}
/*Set the background of the left and right icons*/
.pos > a {
    padding: 10px 0;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.5);
}
/*Set the position of the left move icon*/
.left {
    float: left;
}
/*Set the position of the right move icon*/
.right {
    float: right;
}
/*Set the position of the indicator display*/
.dot {
    bottom: 30px;
    text-align: center;
}
/*Set the indicator background*/
.dot ul {
    display: inline-block;
    padding: 2px;
    background: rgba(0, 0, 0, .2);
    border-radius: 15px;
 
}
/*Set the size of the dot*/
.dot > ul > li {
    float: left;
    margin: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}
/*Set the position of the indicator when displaying the current picture*/
.active {
    background: rgba(255, 255, 255, .6) !important;
}

JavaScript code: Note that the images should be hidden at the beginning, and the first image will be displayed by default. Otherwise, no matter which image you click first, it will be the second image. When displaying the next picture, the mark of the previous picture and the indicator should be cleared

$(function () {
    /*Save the index of the current image*/
    let index = 0;
    let btn = false;
    /*Remove the refresh function of tag a*/
    $('a[href=""]').prop('href', 'javascript:;');
    /*Hide the pictures first and display the first picture by default*/
    $('.content>ul>li').hide();
    $('.content>ul>li:eq(0)').show();
    // Set the direction arrow icon to fade in and out $('.carousel').hover(function () {
        $('.pos').stop().fadeIn()
    }, function () {
        $('.pos').stop().fadeOut()
    })
    // Bind click event to left direction icon $('.left').on('click', function () {
        btn = true;
        clean();
        if (index == 0) {
            index = 5;
        } else {
            --index;
        }
        show();
    })
    // Bind click event to right direction icon $('.right').on('click', function () {
        btn = true;
        clean();
        if (index == 5) {
            index = 0;
        } else {
            ++index;
        }
        show();
    })
    //Indicator indication function (bind click event to the indicator)
    $('.dot li').on('click', function () {
        btn = true;
        let now = $(this).index()
        if (now != index) {
            clean();
            index = now;
            show();
        }
    })
    //Automatic play function (timer)
    setInterval(function () {
        if (!btn) {
            clean();
            if (index == 5) {
                index = 0;
            } else {
                ++index;
            }
            show();
        } else {
            btn = false;
        }

    }, 5000)

    //Clear the previous image and the indicator function clean() {
        $(`.content>ul>li:eq(${index})`).stop().fadeOut();
        $(`.dot>ul>li:eq(${index})`).removeClass('active');
    }
    //Add new pictures and indicators on the indicator function show() {
        console.log(index);
        $(`.content>ul>li:eq(${index})`).stop().fadeIn();
        console.log($(`.content>ul>li:eq(${index})`))
        $(`.dot>ul>li:eq(${index})`).addClass('active');

    }
})

result:

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 implements carousel chart and its principle detailed explanation
jQuery plugin slides to achieve seamless carousel effects
jQuery implements left and right sliding carousel
jQuery adaptive carousel plug-in Swiper usage example
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

<<: MySQL multi-table query detailed explanation

>>: Detailed installation history of Ubuntu 20.04 LTS