Bagaimana untuk melaksanakan carta karusel javascript

Dengan pembangunan berterusan teknologi pembangunan bahagian hadapan, JavaScript telah menjadi bahagian yang amat diperlukan dalam pembangunan bahagian hadapan. Dalam reka bentuk web, imej karusel ialah kaedah paparan yang sangat biasa, yang boleh membantu tapak web mempersembahkan imej, teks dan kandungan lain dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan carta karusel mudah.

1. Reka letak HTML

Pertama, kita perlu membina reka letak HTML karusel. Di sini, kaedah HTML dan CSS yang agak mudah digunakan untuk mencipta bekas carta karusel, seperti yang ditunjukkan di bawah:

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

Antaranya, .slider mewakili bekas carta karusel, .slider-items mewakili bekas item carta karusel , dan .slider-item mewakili satu item karusel. Kita perlu menetapkan atribut .slider-items dalam left untuk mengawal pergerakan item karusel dalam JavaScript.

2. Pelaksanaan JS karusel

1 Dapatkan elemen

Untuk melaksanakan carta karusel, anda perlu mendapatkan nod elemen yang perlu dikendalikan tentukan tatasusunanitems, digunakan untuk menyimpan item carta karusel, dan dapatkan kelas querySelectorAll() melalui kaedah slider-item Kodnya adalah seperti berikut:

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 Tetapkan parameter yang berkaitan

dalam proses melaksanakan carta karusel , kita perlu menetapkan parameter yang berkaitan, seperti item yang dipilih pada masa ini, lebar karusel, dan tetapkan peralihan antara item terakhir dan item pertama, dsb. Kodnya adalah seperti berikut:

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. Laksanakan carta karusel

Seterusnya, kita boleh menggunakan JavaScript untuk melaksanakan carta karusel. Proses khusus ialah:

(1) Cipta fungsi startSlide dan fungsi slideLeft.

• startSlide(): Digunakan untuk memulakan karusel. Item seterusnya daripada item yang dipilih pada masa ini ditakrifkan dalam fungsi Jika item semasa adalah item terakhir, item seterusnya ditetapkan sebagai item pertama, dan carta karusel digelung melalui kaedah setInterval()
• : Digunakan untuk berputar ke kiri. Kaedah slideLeft() digunakan dalam fungsi untuk melakukan peralihan animasi dan melengkapkan kesan karusel. animate()

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

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

(2) Cipta fungsi

untuk mencapai kesan animasi. Fungsi ini menggunakan kaedah animate untuk mencapai peralihan animasi yang lancar, dengan itu mencapai kesan karusel yang lebih baik. 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) Cipta fungsi pelonggaran

untuk mengoptimumkan kesan animasi. 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) Akhir sekali, kita masih perlu menambah fungsi kawalan karusel dalam JavaScript. Di sini kami telah menambahkan acara

dan addEventListener() melalui kaedah mouseenter untuk menjeda dan memulakan karusel apabila tetikus bergerak masuk dan keluar. Kod lengkap adalah seperti berikut: mouseleave

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

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

startSlide();

3. Kod lengkap

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

4. Ringkasan

Pada ketika ini, kami telah melengkapkan semua kod untuk melaksanakan carta karusel dalam JavaScript. Melalui contoh di atas, kita boleh memahami proses khusus menggunakan JavaScript untuk melaksanakan carta karusel, melaksanakan carta karusel yang ringkas dan mudah difahami dan menguasai kaedah pengendalian JavaScript untuk melaksanakan carta karusel. Saya harap artikel ini dapat membantu anda menguasai lagi teknologi pembangunan bahagian hadapan JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan carta karusel javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!