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

MySQL 8.0.18 deployment and installation tutorial under Windows 7

1. Preliminary preparation (windows7+mysql-8.0.18...

Solve the problem of using less in Vue

1. Install less dependency: npm install less less...

Example code for implementing a text marquee with CSS3

Background Here's what happened, Luzhu accide...

Detailed explanation of the use of bus in Vue

Vue bus mechanism (bus) In addition to using vuex...

Practical method of deleting associated tables in MySQL

In the MySQL database, after tables are associate...

A brief discussion on how to write beautiful conditional expressions in JS

Table of contents Multiple conditional statements...

The process of installing MySQL 8.0.26 on CentOS7

1. First, download the corresponding database fro...

Public multi-type attachment image upload area in Vue page and applicable folding panel (sample code)

In front-end projects, attachment uploading is a ...

A brief discussion on the solution to the failure of starting the server installation in MySQL

If this is the first time you install MySQL on yo...

HTML+CSS+JS realizes the scrolling gradient effect of the navigation bar

Table of contents First look at the effect: accom...

Mysql database recovery actual record by time point

Introduction: MySQL database recovery by time poi...

Example of stars for CSS rating effect

What? What star coat? Well, let’s look at the pic...

Summary of the use of TypeScript in React projects

Preface This article will focus on the use of Typ...

Solve the problem of docker images disappearing

1. Mirror images disappear in 50 and 93 [root@h50...

Minimalistic website design examples

Web Application Class 1. DownForEveryoneOrJustMe ...