JS realizes simple picture carousel effect

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

Recommend

How to implement responsive layout with CSS

Implementing responsive layout with CSS Responsiv...

HTML Basic Notes (Recommended)

1. Basic structure of web page: XML/HTML CodeCopy...

mysql 8.0.18.zip installation and configuration method graphic tutorial (windows 64 bit)

Regarding uninstalling the previously installed v...

Solve the problem that the CentOS7 virtual machine cannot access the Internet and set up the CentOS7 virtual machine to use a static IP to access the Internet

I was playing with CentOS in a VMware virtual mac...

Several ways to set the expiration time of localStorage

Table of contents Problem Description 1. Basic so...

CSS horizontal progress bar and vertical progress bar implementation code

Sometimes it’s nice to see some nice scroll bar e...

HTML fixed title column, title header table specific implementation code

Copy code The code is as follows: <!DOCTYPE ht...

How to Apply for Web Design Jobs

<br />Hello everyone! It’s my honor to chat ...

WeChat applet calculator example

This article shares the specific code of the WeCh...

Introduction to partitioning the root directory of Ubuntu with Vmvare virtual machine

Table of contents Preface Rationale Procedure 1. ...

How to implement batch deletion of large amounts of data in MySQL large tables

The question is referenced from: https://www.zhih...

Detailed explanation of Vue filter implementation and application scenarios

1. Brief Introduction Vue.js allows you to define...

mysql8.0.11 winx64 installation and configuration method graphic tutorial (win10)

The installation tutorial of mysql 8.0.11 winx64 ...

Analysis of the implementation of MySQL statement locking

Abstract: Analysis of two MySQL SQL statement loc...

Click the toggle button in Vue to enable the button and then disable it

The implementation method is divided into three s...