How to implement javascript carousel chart

With the continuous development of front-end development technology, JavaScript has become an indispensable part of front-end development. In web design, carousel images are a very common display method, which can help websites better present images, text and other content. This article will introduce how to use JavaScript to implement a simple carousel chart.

1. HTML layout

First, we need to build the HTML layout of the carousel. Here, a relatively simple HTML and CSS method is used to create a carousel diagram container, as shown below:

<div class="slider">
    <ul class="slider-items">
        <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy" alt="How to implement javascript carousel chart" ></li>
        <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="2.jpg"  class="lazy" alt="How to implement javascript carousel chart" ></li>
        <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="3.jpg"  class="lazy" alt="How to implement javascript carousel chart" ></li>
    </ul>
</div>

Among them, .slider represents the carousel diagram container, .slider-items represents the carousel item container, .slider-item represents a single carousel item. We need to set the left property in .slider-items to control the movement of carousel items in JavaScript.

2. Implement carousel with JS

1. Get elements

To implement a carousel chart, you first need to get the element nodes that need to be operated. Here we define an arrayitems is used to store carousel items and obtain the slider-item class through the querySelectorAll() method. The code is as follows:

var slider = document.querySelector('.slider');
var sliderItems = document.querySelectorAll('.slider-item');
var items = [];

for (var i = 0; i < sliderItems.length; i++) {
    items.push(sliderItems[i]);
}

2. Set relevant parameters

In the process of implementing the carousel chart, we need to set relevant parameters, such as the currently selected item, the width of the carousel chart, and set the transition between the last item and the first item wait. The code is as follows:

var current = 0;
var width = 600;
var height = 400;
var imgCount = items.length;
var animationSpeed = 1000;
var pause = 3000;
var interval;
var sliderContainer = document.querySelector('.slider-items');
sliderContainer.style.width = width * items.length + 'px';
sliderContainer.style.height = height + 'px';

3. Implement the carousel chart

Next, we can use JavaScript to implement the carousel chart. The specific process is:

(1) Create the startSlide function and the slideLeft function.

• startSlide(): Used to start the carousel. The next item than the currently selected item is defined in the function. If the current item is the last item, the next item is set as the first item, and the carousel chart is cycled through the setInterval() method. Play;
• slideLeft(): Used to rotate left. The animate() method is used in the function to perform animation transition and complete the carousel effect.

function startSlide() {
    interval = setInterval(function () {
        slideLeft();
    }, pause);
}

function slideLeft() {
    if (current === imgCount - 1) {
        current = -1;
    }
    current++;
    animate(sliderContainer, -width * current, animationSpeed);
}

(2) Create the animate function to achieve animation effects. The requestAnimationFrame() method is used in the function to achieve smooth transition of animation, thereby achieving a better carousel effect.

function animate(el, left, speed) {
    var start = el.offsetLeft;
    var destination = left;
    var startTime = new Date().getTime();
    var distance = destination - start;

    function frame() {
        var elapsedTime = new Date().getTime() - startTime;
        var position = easeInOutQuart(elapsedTime, start, distance, speed);
        el.style.left = position + 'px';
        if (elapsedTime < speed) {
            requestAnimationFrame(frame);
        }
    }
    frame();
}

(3) Create an easing function easeInOutQuart to optimize the animation effect.

function easeInOutQuart(t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}

(4) Finally, we still need to add the carousel control function in JavaScript. Here we have added mouseenter and mouseleave events through the addEventListener() method, which are used to pause and start the carousel when the mouse moves in and out. The complete code is as follows:

slider.addEventListener('mouseenter', function () {
    clearInterval(interval);
});

slider.addEventListener('mouseleave', function () {
    startSlide();
});

startSlide();

3. Complete code

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JavaScript轮播图实现</title>
    <style>
        .slider {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
        }

        .slider-items {
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .slider-item {
            display: inline-block;
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="slider">
        <ul class="slider-items">
            <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy" alt="How to implement javascript carousel chart" ></li>
            <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="2.jpg"  class="lazy" alt="How to implement javascript carousel chart" ></li>
            <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="3.jpg"  class="lazy" alt="How to implement javascript carousel chart" ></li>
        </ul>
    </div>
    <script>
        var slider = document.querySelector('.slider');
        var sliderItems = document.querySelectorAll('.slider-item');
        var items = [];

        for (var i = 0; i < sliderItems.length; i++) {
            items.push(sliderItems[i]);
        }

        var current = 0;
        var width = 600;
        var height = 400;
        var imgCount = items.length;
        var animationSpeed = 1000;
        var pause = 3000;
        var interval;
        var sliderContainer = document.querySelector('.slider-items');
        sliderContainer.style.width = width * items.length + 'px';
        sliderContainer.style.height = height + 'px';

        function startSlide() {
            interval = setInterval(function () {
                slideLeft();
            }, pause);
        }

        function slideLeft() {
            if (current === imgCount - 1) {
                current = -1;
            }
            current++;
            animate(sliderContainer, -width * current, animationSpeed);
        }

        function animate(el, left, speed) {
            var start = el.offsetLeft;
            var destination = left;
            var startTime = new Date().getTime();
            var distance = destination - start;

            function frame() {
                var elapsedTime = new Date().getTime() - startTime;
                var position = easeInOutQuart(elapsedTime, start, distance, speed);
                el.style.left = position + 'px';
                if (elapsedTime < speed) {
                    requestAnimationFrame(frame);
                }
            }
            frame();
        }

        function easeInOutQuart(t, b, c, d) {
            if ((t /= d / 2) < 1) 
                return c / 2 * t * t * t * t + b;
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }

        slider.addEventListener('mouseenter', function () {
            clearInterval(interval);
        });

        slider.addEventListener('mouseleave', function () {
            startSlide();
        });

        startSlide();
    </script>
</body>
</html>

4. Summary

At this point, we have completed all the code to implement the carousel chart in JavaScript. Through the above examples, we can understand the specific process of using JavaScript to implement a carousel chart, implement a simple and easy-to-understand carousel chart, and master the operation method of JavaScript to implement a carousel chart. I hope this article can help you further master JavaScript front-end development technology.

The above is the detailed content of How to implement javascript carousel chart. For more information, please follow other related articles on the PHP Chinese website!