JS realizes simple picture carousel effect

This article shares the specific code of JS to achieve a simple picture carousel effect for your reference. The specific content is as follows

Achieve results

The left and right buttons can be clicked to move the displayed image left and right for seamless scrolling
Click the small circle below to jump to the corresponding image index
If the above operations are not performed, the pictures will rotate automatically.

HTML source code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel chart</title>
    <link rel="stylesheet" href="./style.css" >
    <script src="./index.js"></script>
    <script src="./animate.js"></script>
</head>

<body>
    <div class="carousel_box" id="carousel-box">
        <a href="javascript:;" class="arrow-l">
            < </a>
                <a href="javascript:;" class="arrow-r"> > </a>
                <ul class="move">
                    <li><img src="./images/xuezhong_1.jpg" alt=""></li>
                    <li><img src="./images/guimizhizhu_2.jpg" alt=""></li>
                    <li><img src="./images/jianlai_3.jpg" alt=""></li>
                    <li><img src="./images/yichang_4.jpg" alt=""></li>
                </ul>
                <ol class="circle">
                </ol>
    </div>
</body>

</html>

Inside a large div box, there are two buttons floating in the middle, four pictures, and a row of small circles below.

CSS source code

*{
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
}

#carousel-box {
    position: relative;
    width: 700px;
    height: 300px;
    background-color: pink;
    margin: 100px auto;
    overflow: hidden;
}

.arrow-l,.arrow-r {
    display: none;
    position:absolute;
    width: 24px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    background: rgba(0, 0, 0, 0.3);
    text-align:center;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    font-family: 'icomoon';
    z-index: 3;
}
.arrow-r {
    right: 0;
}

#carousel-box img{
    width: 700px;
    height: 300px;
}

#carousel-box ul {
    position:absolute;
    width: 1000%;
}

#carousel-box ul li {
    float: left;
}

.circle {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.circle li {
    float: left;
    width: 8px;
    height: 8px;
    margin: 0 5px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
}

.current {
    background-color: pink;
}

JS source code

animate.js: Function to move left and right on the horizontal plane

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        /* Determine whether the decimal is positive or negative, whether to take the larger or smaller decimal*/
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

index.js

window.addEventListener('load', function () {
    var carousel = document.querySelector('.carousel_box');
    var ul = document.querySelector('.move');
    var ol = document.querySelector('.circle');
    var carcouselWidth = carousel.offsetWidth;
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');

    carousel.addEventListener('mouseenter', function () {
        arrow_r.style.display = 'block';
        arrow_l.style.display = 'block';
        clearInterval(timer);
        timer = null; // clear the timer variable })

    carousel.addEventListener('mouseleave', function () {
        arrow_r.style.display = 'none';
        arrow_l.style.display = 'none';
        timer = setInterval(function () {
            arrow_r.click();
        }, 2000);
    })
    var num = 0;
    var circle = 0;

    // Generate corresponding small circles according to the number of pictures for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ol.appendChild(li);


        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            var n = this.getAttribute('index');
            num = n;
            circle = n;
            animate(ul, -n * carcouselWidth);
            console.log(n);
        })
    }

    ol.children[0].className = 'current';
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    var flag = true;


    /* function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    } */


    arrow_r.addEventListener('click', function () {

        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * carcouselWidth, function () {
                flag = true;
            });
        }

        circle++;
        if (circle == ol.children.length) {
            circle = 0;
        }

        circleChange();
    })

    arrow_l.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * carcouselWidth + 'px';

            }
            num--;
            animate(ul, -num * carcouselWidth, function () {
                flag = true;
            });

            circle--;
            circle = circle < 0 ? ol.children.length - 1 : circle;
            //Call function circleChange();
        }
    });


    function circleChange() {

        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }

        ol.children[circle].className = 'current';
    }

    var timer = setInterval(function () {

        arrow_r.click();
    }, 2000);

Experience: In the js implementation function, it is important to pay attention to how to generate small circles according to the number of pictures and enable seamless scrolling.
Unresolved bug: After quickly clicking the small circle to jump multiple times, the small circle and the image index position may be confused. Similarly, clicking the left and right buttons may also cause similar problems.

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:

javascript to realize the scroll wheel carousel picture
JS implements simple automatic image rotation
Js picture click switch carousel implementation code
JavaScript to achieve the complete code of the carousel image
Native js realizes clicking carousel to switch pictures
JavaScript to achieve image carousel special effects
Detailed explanation of six web page image carousel effects implemented with JavaScript

<<: Build a stable and highly available cluster based on mysql+mycat, load balancing, master-slave replication, read-write separation operation

>>: Example of setting up a whitelist in Nginx using the geo module

Apache Log4j2 reports a nuclear-level vulnerability and a quick fix

JS realizes simple picture carousel effect

Achieve results

CSS source code

JS source code

Apache Log4j2 reports a nuclear-level vulnerability and a quick fix

Mysql database recovery actual record by time point

Detailed explanation of commands to read and write remote files using Vim in Linux system

HTML Form Tag Tutorial (4):

Detailed explanation of several ways to remove the gap between inline-block elements in CSS

The vue project realizes drawing a watermark in a certain area

What does the n after int(n) in MySQL mean?

JavaScript realizes the drag effect of modal box

CSS Sticky Footer Implementation Code

Implementing license plate input function in WeChat applet

Recommend

How to use react-color to implement the front-end color picker

How to hide the version number in Nginx

A complete record of the process of building mobile applications using Vue Native

Thoughts on truncation of multi-line text with a "show more" button

MySQL 5.7.17 installation and configuration graphic tutorial

Deepin20.1 system installs MySQL8.0.23 (super detailed MySQL8 installation tutorial)

HTML Tutorial: DOCTYPE Abbreviation

An article to solve the echarts map carousel highlight

How to change the root password in a container using Docker

Detailed explanation of the usage of position attribute in HTML (four types)

A brief introduction to MySQL InnoDB ReplicaSet

How to implement responsive layout with CSS

Detailed tutorial on installing centos8 on VMware

HTML form component example code

How to modify the default storage location of Docker images (solution)