집 > 기사 > 웹 프론트엔드 > 자바스크립트 캐러셀 차트 구현 방법

자바스크립트 캐러셀 차트 구현 방법

WBOY원래의: 2023-05-26 19:20:061793검색

프런트엔드 개발 기술이 지속적으로 발전하면서 JavaScript는 프런트엔드 개발에 없어서는 안 될 부분이 되었습니다. 웹 디자인에서 캐러셀 이미지는 웹사이트가 이미지, 텍스트 및 기타 콘텐츠를 더 잘 표현하는 데 도움이 되는 매우 일반적인 표시 방법입니다. 이 기사에서는 JavaScript를 사용하여 간단한 캐러셀 차트를 구현하는 방법을 소개합니다.

1. HTML 레이아웃

먼저 캐러셀의 HTML 레이아웃을 구축해야 합니다. 여기서는 비교적 간단한 HTML과 CSS 방식을 사용하여 아래와 같이 캐러셀 이미지 컨테이너를 생성합니다.

<div class="slider">
    <ul class="slider-items">
        <li class="slider-item"><img src="1.jpg"></li>
        <li class="slider-item"><img src="2.jpg"></li>
        <li class="slider-item"><img src="3.jpg"></li>
    </ul>
</div>

그 중 .slider는 캐러셀 이미지 컨테이너를 나타내고, .slider- items는 캐러셀 항목 컨테이너를 나타내고 .slider-item은 단일 캐러셀 항목을 나타냅니다. JavaScript에서 캐러셀 항목의 이동을 제어하려면 .slider-items에서 left 속성을 설정해야 합니다. .slider 表示轮播图容器，.slider-items 表示轮播图项容器，.slider-item 表示单个轮播图项。我们需要在 .slider-items 中设置 left 属性，以便在 JavaScript 中控制轮播图项的移动。

二、JS 实现轮播

1.获取元素

要实现轮播图，首先需要获取需要操作的元素节点，这里我们定义一个数组 items，用来储存轮播图项，并通过 querySelectorAll() 方法获取 slider-item 类，代码如下：

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.设置相关参数

在实现轮播图的过程中，我们需要设置相关的参数，例如当前选中的项，轮播图的宽度，设定最后一项与第一项之间进行过渡等。代码如下：

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.实现轮播图

接下来，我们可以使用 JavaScript 实现轮播图。具体过程为：

（1）创建 startSlide 函数和 slideLeft 函数。

startSlide()：用来开始轮播图。在函数中定义了比当前选中项的下一项，如果当前项为最后一项，则将下一项设置为第一项，并通过 setInterval() 方法进行轮播图循环播放；
slideLeft()：用来向左进行轮播。在函数中使用了 animate() 方法进行动画过渡，完成轮播效果。

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

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

（2）创建 animate 函数，用来实现动画效果。函数中通过 requestAnimationFrame() 方法实现了动画的流畅过渡，从而达到更好的轮播效果。

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）创建缓动函数 easeInOutQuart，用来优化动画效果。

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）最后，我们仍需在 JavaScript 中添加轮播图的控制功能。这里我们通过 addEventListener() 方法添加了 mouseenter 和 mouseleave

2. JS로 캐러셀 구현

1. 요소 가져오기

캐러셀 그래프를 구현하려면 먼저 작동해야 하는 요소 노드를 가져와야 합니다. 캐러셀 차트 항목을 저장하고 querySelectorAll() 메서드를 통해 slider-item 클래스를 가져옵니다. 코드는 다음과 같습니다.

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

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

startSlide();

2 관련 매개변수를 설정합니다. 캐러셀 차트를 구현하는 과정에서 현재 선택된 항목, 캐러셀 너비, 마지막 항목과 첫 번째 항목 사이의 전환 설정 등 관련 매개변수를 설정해야 합니다. 코드는 다음과 같습니다. 🎜

<!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="1.jpg"></li>
            <li class="slider-item"><img src="2.jpg"></li>
            <li class="slider-item"><img src="3.jpg"></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>

🎜3. 캐러셀 차트 구현🎜🎜다음으로 JavaScript를 사용하여 캐러셀 차트를 구현할 수 있습니다. 구체적인 프로세스는 다음과 같습니다. 🎜🎜 (1) startSlide 함수와 slideLeft 함수를 만듭니다. 🎜

startSlide(): 캐러셀을 시작하는 데 사용됩니다. 함수에는 현재 선택된 항목보다 다음 항목이 정의되어 있으며, 현재 항목이 마지막 항목인 경우 다음 항목이 첫 번째 항목으로 설정되며 setInterval()를 통해 캐러셀 차트가 수행됩니다. > 메소드. 반복 재생
slideLeft(): 왼쪽으로 회전하는 데 사용됩니다. 함수에서 animate() 메서드를 사용하여 애니메이션 전환을 수행하고 캐러셀 효과를 완성합니다.

rrreee🎜 (2) 애니메이션 효과를 얻으려면 animate 함수를 만듭니다. 함수에서는 애니메이션의 원활한 전환을 위해 requestAnimationFrame() 메서드를 사용하여 더 나은 캐러셀 효과를 얻습니다. 🎜rrreee🎜(3) 애니메이션 효과를 최적화하려면 easeInOutQuart 여유 함수를 만듭니다. 🎜rrreee🎜(4) 마지막으로 JavaScript에 캐러셀 제어 기능을 추가해야 합니다. 여기서는 addEventListener() 메서드를 통해 mouseenter 및 mouseleave 이벤트를 추가하여 마우스가 들어오고 나갈 때 캐러셀을 일시 중지하고 시작했습니다. 완성된 코드는 다음과 같습니다. 🎜rrreee🎜 3. 완성된 코드 🎜rrreee 🎜 4. 요약 🎜🎜 이제 JavaScript로 캐러셀 차트를 구현하기 위한 모든 코드가 완성되었습니다. 위의 예를 통해 JavaScript를 사용하여 캐러셀 차트를 구현하는 구체적인 프로세스를 이해할 수 있고, 간단하고 이해하기 쉬운 캐러셀 차트를 구현하며, 캐러셀 차트를 구현하기 위한 JavaScript의 작동 방법을 마스터할 수 있습니다. 이 글이 여러분이 JavaScript 프론트엔드 개발 기술을 더욱 마스터하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 자바스크립트 캐러셀 차트 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html 循环 JS 事件

성명：

이전 기사：JavaScript의 구체적인 처리 프로세스를 간략하게 설명합니다.다음 기사：JavaScript의 구체적인 처리 프로세스를 간략하게 설명합니다.