So implementieren Sie ein Javascript-Karusselldiagramm-Front-End-Fragen und Antworten-php.cn

Mit der kontinuierlichen Weiterentwicklung der Front-End-Entwicklungstechnologie ist JavaScript zu einem unverzichtbaren Bestandteil der Front-End-Entwicklung geworden. Im Webdesign sind Karussellbilder eine sehr verbreitete Darstellungsmethode, die Websites dabei helfen kann, Bilder, Texte und andere Inhalte besser darzustellen. In diesem Artikel wird erläutert, wie Sie mit JavaScript ein einfaches Karusselldiagramm implementieren.

1. HTML-Layout

Zuerst müssen wir das HTML-Layout des Karussells erstellen. Hier wird eine relativ einfache HTML- und CSS-Methode verwendet, um einen Karussell-Bildcontainer zu erstellen, wie unten gezeigt:

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

Nach dem Login kopieren

Unter diesen stellt .slider den Karussell-Bildcontainer dar und .slider- items</code > stellt einen Karussellelementcontainer dar und <code>.slider-item stellt ein einzelnes Karussellelement dar. Wir müssen das Attribut left in .slider-items festlegen, um die Bewegung von Karussellelementen in JavaScript zu steuern. .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]);
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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);
}

Nach dem Login kopieren

（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();
}

Nach dem Login kopieren

（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;
}

Nach dem Login kopieren

（4）最后，我们仍需在 JavaScript 中添加轮播图的控制功能。这里我们通过 addEventListener() 方法添加了 mouseenter 和 mouseleave

2. Karussell mit JS implementieren

Um das Karusselldiagramm zu implementieren, müssen Sie zunächst die Elementknoten abrufen, die bearbeitet werden müssen Speichern Sie das Karussell-Diagrammelement und rufen Sie die Klasse slider-item über die Methode querySelectorAll() ab. Der Code lautet wie folgt:

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

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

startSlide();

Nach dem Login kopieren

2 Bei der Implementierung des Karusselldiagramms müssen wir relevante Parameter festlegen, z. B. das aktuell ausgewählte Element, die Breite des Karussells und den Übergang zwischen dem letzten Element und dem ersten Element usw. festlegen. Der Code lautet wie folgt:

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

Nach dem Login kopieren

3. Implementieren Sie das Karusselldiagramm🎜🎜Als nächstes können wir JavaScript verwenden, um das Karusselldiagramm zu implementieren. Der spezifische Prozess ist: 🎜🎜 (1) Erstellen Sie die Funktion startSlide und die Funktion slideLeft. 🎜

startSlide(): Wird zum Starten des Karussells verwendet. Das nächste Element als das aktuell ausgewählte Element wird in der Funktion definiert. Wenn das aktuelle Element das letzte Element ist, wird das nächste Element als erstes Element festgelegt und das Karusselldiagramm wird über den setInterval()ausgeführt > Methode. Schleifenwiedergabe;
slideLeft(): Wird zum Drehen nach links verwendet. Die Methode animate() wird in der Funktion verwendet, um einen Animationsübergang durchzuführen und den Karusselleffekt zu vervollständigen.

rrreee🎜 (2) Erstellen Sie die Funktion animate, um Animationseffekte zu erzielen. In der Funktion wird die Methode requestAnimationFrame() verwendet, um einen reibungslosen Übergang der Animation zu erreichen und so einen besseren Karusselleffekt zu erzielen. 🎜rrreee🎜(3) Erstellen Sie die Beschleunigungsfunktion easeInOutQuart, um den Animationseffekt zu optimieren. 🎜rrreee🎜(4) Abschließend müssen wir noch die Karussell-Steuerungsfunktion in JavaScript hinzufügen. Hier haben wir die Ereignisse mouseenter und mouseleave über die Methode addEventListener() hinzugefügt, um das Karussell anzuhalten und zu starten, wenn sich die Maus hinein und heraus bewegt. Der vollständige Code lautet wie folgt: 🎜rrreee🎜 3. Vollständiger Code 🎜rrreee 🎜 4. Zusammenfassung 🎜🎜 Zu diesem Zeitpunkt haben wir den gesamten Code zur Implementierung des Karusselldiagramms in JavaScript fertiggestellt. Anhand der obigen Beispiele können wir den spezifischen Prozess der Verwendung von JavaScript zum Implementieren eines Karusselldiagramms verstehen, ein einfaches und leicht verständliches Karusselldiagramm implementieren und die Operationsmethode von JavaScript zum Implementieren eines Karusselldiagramms beherrschen. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, die JavaScript-Frontend-Entwicklungstechnologie besser zu beherrschen. 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Javascript-Karusselldiagramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!