Comment implémenter un graphique carrousel javascript

Avec le développement continu de la technologie de développement front-end, JavaScript est devenu un élément indispensable du développement front-end. Dans la conception Web, les images carrousel sont une méthode d’affichage très courante, qui peut aider les sites Web à mieux présenter les images, le texte et d’autres contenus. Cet article explique comment utiliser JavaScript pour implémenter un simple graphique carrousel.

1. Mise en page HTML

Tout d'abord, nous devons créer la mise en page HTML du carrousel. Ici, une méthode HTML et CSS relativement simple est utilisée pour créer un conteneur d'images de carrousel, comme indiqué ci-dessous :

<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>

Parmi eux, .slider représente le conteneur d'images de carrousel, et .slider- items représente un conteneur d'éléments de carrousel et .slider-item représente un seul élément de carrousel. Nous devons définir l'attribut left dans .slider-items pour contrôler le mouvement des éléments du carrousel en JavaScript. .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. Implémentez le carrousel avec JS

1. Obtenir des éléments

Pour implémenter le graphique du carrousel, vous devez d'abord obtenir les nœuds d'éléments qui doivent être exploités. Ici, nous définissons un tableau items. stockez l'élément du graphique du carrousel et obtenez la classe slider-item via la méthode querySelectorAll() Le code est le suivant :

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

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

startSlide();

2. Lors de la mise en œuvre du graphique carrousel , nous devons définir les paramètres pertinents, tels que l'élément actuellement sélectionné, la largeur du carrousel, et définir la transition entre le dernier élément et le premier élément, etc. Le code est le suivant : 🎜

<!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. Implémentez le graphique carrousel🎜🎜Ensuite, nous pouvons utiliser JavaScript pour implémenter le graphique carrousel. Le processus spécifique est le suivant : 🎜🎜 (1) Créer la fonction startSlide et la fonction slideLeft. 🎜

• startSlide() : Utilisé pour démarrer le carrousel. L'élément suivant que l'élément actuellement sélectionné est défini dans la fonction. Si l'élément actuel est le dernier élément, l'élément suivant est défini comme premier élément et le graphique carrousel est effectué via setInterval() méthode de lecture en boucle ;
• slideLeft() : Utilisé pour tourner vers la gauche. La méthode animate() est utilisée dans la fonction pour effectuer une transition d'animation et compléter l'effet carrousel.

rrreee🎜 (2) Créez la fonction animate pour obtenir des effets d'animation. Dans la fonction, la méthode requestAnimationFrame() est utilisée pour obtenir une transition fluide de l'animation, obtenant ainsi un meilleur effet carrousel. 🎜rrreee🎜(3) Créez la fonction d'assouplissement easeInOutQuart pour optimiser l'effet d'animation. 🎜rrreee🎜(4) Enfin, nous devons encore ajouter la fonction de contrôle du carrousel en JavaScript. Ici, nous avons ajouté les événements mouseenter et mouseleave via la méthode addEventListener() pour mettre en pause et démarrer le carrousel lorsque la souris entre et sort. Le code complet est le suivant : 🎜rrreee🎜 3. Code complet 🎜rrreee 🎜 4. Résumé 🎜🎜 À ce stade, nous avons terminé tout le code pour implémenter le graphique carrousel en JavaScript. Grâce aux exemples ci-dessus, nous pouvons comprendre le processus spécifique d'utilisation de JavaScript pour implémenter un graphique carrousel, implémenter un graphique carrousel simple et facile à comprendre et maîtriser la méthode de fonctionnement de JavaScript pour implémenter un graphique carrousel. J'espère que cet article pourra vous aider à mieux maîtriser la technologie de développement frontal JavaScript. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!