Bagaimana untuk membuat carta karusel javascript-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk membuat carta karusel javascript

王林

Lepaskan： 2023-05-09 09:22:06

asal

1166 orang telah melayarinya

Bagaimana untuk membuat karusel JavaScript?

Dengan pembangunan pembangunan bahagian hadapan Web, imej karusel telah menjadi salah satu komponen biasa bagi kebanyakan tapak web dan aplikasi. Walau bagaimanapun, saya percaya bahawa ramai rakan yang baru dalam pembangunan bahagian hadapan akan bertanya, bagaimana untuk membuat carta karusel JavaScript?

Artikel ini akan memperkenalkan anda tentang cara menggunakan JavaScript untuk mencipta carta karusel dan membantu anda memahami secara beransur-ansur prinsip asas dan teknologi biasa untuk melaksanakan carta karusel.

1. Prinsip asas imej karusel

Imej karusel, seperti namanya, ialah sekumpulan imej yang boleh dimainkan dalam gelung Ia merealisasikan gelung automatik atau penukaran manual melalui JavaScript. membenarkan pengguna menyemak imbasnya melalui berbilang imej atau kandungan.

Prinsip asas carta karusel dibahagikan kepada dua bahagian: struktur HTML dan logik JavaScript.

Struktur HTML:

Struktur HTML ialah asas carta karusel Strukturnya kira-kira seperti berikut:

<div class="carousel">
  <ul class="carousel-list">
    <li class="carousel-item"><img src="image1.jpg" alt="image1"></li>
    <li class="carousel-item"><img src="image2.jpg" alt="image2"></li>
    <li class="carousel-item"><img src="image3.jpg" alt="image3"></li>
    <li class="carousel-item"><img src="image4.jpg" alt="image4"></li>
    <li class="carousel-item"><img src="image5.jpg" alt="image5"></li>
  </ul>
</div>

Salin selepas log masuk

di mana, .carousel ialah bekas karusel. carta, .carousel-list ialah bekas senarai imej dan .carousel-item ialah bekas untuk setiap imej individu.

Logik JavaScript:

Logik JavaScript melaksanakan teras carta karusel, biasanya dengan cara berikut:

1 Dapatkan elemen halaman carta karusel dan gunakan kod JavaScript untuk memilih HTML Elemen .carousel.

var carousel = document.querySelector('.carousel');

Salin selepas log masuk

2. Dapatkan bekas senarai imej dan bekas imej individu,

var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');

Salin selepas log masuk

3 Dapatkan lebar imej karusel,

var itemWidth = items[0].offsetWidth;

Salin selepas log masuk

4 Peranti pemasaan,

var delay = 3000;
var interval;

Salin selepas log masuk

5 Konfigurasikan main balik automatik dan pensuisan manual,

function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        if(left <= itemWidth - list.offsetWidth) {
            list.style.left = "0px";
        } else {
            list.style.left = left + 'px';
        }
    }, delay);
}

function stopCarousel() {
    clearInterval(interval);
}

Salin selepas log masuk

2. Laksanakan carta karusel ringkas

Kini, kami telah memahami prinsip asas carta karusel. , dan mencapai kesan asas carta karusel melalui kod. Di bawah, kami akan melaksanakan carta karusel ringkas berdasarkan kesan ini.

Struktur HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple Carousel</title>  
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div class="carousel">
      <ul class="carousel-list">
        <li class="carousel-item"><img src="img/1.jpg" alt="1"></li>
        <li class="carousel-item"><img src="img/2.jpg" alt="2"></li>
        <li class="carousel-item"><img src="img/3.jpg" alt="3"></li>
        <li class="carousel-item"><img src="img/4.jpg" alt="4"></li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Salin selepas log masuk

Kod JavaScript:

var carousel = document.querySelector('.carousel');
var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');
var itemWidth = items[0].offsetWidth; 
var delay = 3000;
var interval;

// 自动播放
function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        if(left <= itemWidth - list.offsetWidth) {
            list.style.left = "0px";
        } else {
            list.style.left = left + 'px';
        }
    }, delay);
}

// 手动切换
function stopCarousel() {
    clearInterval(interval);
}

// 启动轮播
startCarousel();

Salin selepas log masuk

Kod CSS:

.carousel {
  position: relative;
  overflow: hidden;
  width: 400px;           /* 轮播图容器的宽度 */
  height: 300px;          /* 轮播图容器的高度 */
}
.carousel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: ${(items.length * 100)}%;
}
.carousel-item {
  float: left;
  width: calc(100% / ${(items.length)});
}
.carousel-item img {
  display: block;
  width: 100%;
  height: auto;
}

Salin selepas log masuk

3. Carta karusel untuk mencapai pelbagai kesan

Melalui contoh di atas, kami telah mempelajari cara membuat carta karusel mudah. Walau bagaimanapun, biasanya imej karusel bukan sahaja mempunyai kesan di atas, kita juga boleh mencapai kesan imej karusel yang lebih praktikal melalui JavaScript.

1. Kesan pelonggaran

Kesan pelonggaran ialah kesan menukar kelajuan setiap gambar daripada cepat kepada perlahan apabila bertukar. Dengan menggunakan JavaScript kita biasanya boleh menulis seperti ini:

function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        var startTime = Date.now();
        var easing = function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        };
        var animate = function() {
            var time = Date.now() - startTime;
            var easingLeft = easing(time, parseInt(list.style.left), -itemWidth, delay);
            if(time <= delay) {
                list.style.left = easingLeft + 'px';
                requestAnimationFrame(animate);
            } else {
                list.style.left = -itemWidth + 'px';
                list.appendChild(items[0]);
            }
        };
        requestAnimationFrame(animate);
    }, delay);
}

Salin selepas log masuk

2. Reka letak responsif

Reka bentuk Web responsif adalah akal dalam reka bentuk bahagian hadapan moden untuk membolehkan karusel menyokong skrin yang berbeza saiz, Untuk menyesuaikan diri dengan reka letak web dengan lebih baik, kita perlu membuat pelarasan dan pengoptimuman tambahan.

/* 以vw为基准 */
.carousel {
  position: relative;
  overflow: hidden;
  width: 80vw;         /* 轮播图容器的宽度 */
  height: calc(40vw);  /* 轮播图容器的高度 */
}

/* 以persent为基准 */
.carousel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: ${(items.length * 100)}%;
  top: 0;
  left: 0;
  transition: left .3s;
}

.carousel-item {
  float: left;
  width: calc(100% / ${(items.length)});
  height: 100%;
}

/* 调整图片大小 */
.carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Salin selepas log masuk

Antaranya, unit vw boleh menentukan panjang sebagai peratusan lebar port pandangan, dan karusel akan mengekalkan reka letak responsif tanpa mengira bagaimana saiz skrin berubah.

4. Ringkasan

Setakat ini, kami telah memahami prinsip asas dan kaedah pelaksanaan untuk mencipta karusel melalui JavaScript. Melalui pelarasan dan pengoptimuman, kami boleh melaksanakan lebih banyak komponen karusel dengan gaya dan kesan yang kaya, sekali gus memenuhi keperluan pengguna untuk kandungan dan perkhidmatan web.

Sudah tentu, masih terdapat banyak kesukaran teknikal dan butiran operasi yang perlu dikuasai dalam membuat karusel dengan JavaScript Saya berharap semua orang dapat menguasai kemahiran ini secara beransur-ansur dalam pembangunan sebenar dan terus meningkatkan kebolehan pengaturcaraan mereka.

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