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

When the interviewer asked the difference between char and varchar in mysql

Use .Htaccess to prevent malicious IP attacks on websites, prohibit access to specified domain names, prohibit machine crawlers, and prohibit hotlinking

A few days ago, I discovered that my website was ...

JS realizes simple picture carousel effect

Achieve results

CSS source code

JS source code

When the interviewer asked the difference between char and varchar in mysql

The scroll bar position is retained when scrolling the vant list component

setup+ref+reactive implements vue3 responsiveness

4 flexible Scss compilation output styles

MySQL Basics Quick Start Knowledge Summary (with Mind Map)

Pay attention to the use of HTML tags in web page creation

How to use docker compose to build fastDFS file server

Three ways to delete a table in MySQL (summary)

Detailed steps for installing MinIO on Docker

Javascript Bootstrap's grid system, navigation bar and carousel detailed explanation

Recommend

Introduction to Enterprise Production MySQL Optimization

A debugging process record of Chinese garbled characters in the Tomcat source code startup console

mysql5.7.14 decompressed version installation graphic tutorial

Linux swap partition (detailed explanation)

What is Makefile in Linux? How does it work?

js implements shopping cart addition and subtraction and price calculation

Use .Htaccess to prevent malicious IP attacks on websites, prohibit access to specified domain names, prohibit machine crawlers, and prohibit hotlinking

How to install MySQL 8.0 and log in to MySQL on MacOS

Textarea tag in HTML

Vue.js uses Element-ui to implement the navigation menu

How to modify the previous command when an input error occurs in the MySQL command prompt

Detailed explanation of this pointing in JS arrow function

Summary of XHTML application in web design study

Nginx installation error solution

Teach you how to implement a react from html