Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat karusel dengan javascript

Bagaimana untuk membuat karusel dengan javascript

PHPzasal: 2023-04-21 10:01:20727semak imbas

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas dalam pembangunan web. Ia boleh digunakan untuk pelbagai fungsi, seperti mengemas kini kandungan tapak web secara dinamik, mengendalikan input borang, mengawal kesan lukisan dan animasi, dan mencipta antara muka pengguna interaktif. Antaranya, JavaScript juga boleh digunakan untuk mencipta karusel untuk menjadikan tapak web lebih menarik dan menyediakan pengguna dengan kesan visual yang lebih baik dan pengalaman pengguna yang lebih baik.

Dalam pelaksanaan imej karusel, JavaScript sering digunakan untuk mengawal putaran dan penukaran imej. Ia menggunakan pengendalian acara dan pemasa (setTimeout dan setInterval) untuk melaksanakan fungsi karusel. Berikut ialah beberapa kaedah pelaksanaan carta karusel biasa.

Kaedah 1: Gunakan pemalam jQuery

jQuery ialah perpustakaan JavaScript yang popular, dan disebabkan penggunaannya yang meluas, banyak pemalam karusel telah ditulis untuk jQuery, yang mudah dan mudah untuk digunakan. Pemalam ini selalunya termasuk banyak pilihan prakonfigurasi, menjadikannya ideal untuk pelbagai tapak web dan aplikasi yang berbeza.

Menggunakan pemalam jQuery, anda boleh melaksanakan fungsi karusel dengan cepat. Hanya mengimport fail pemalam ke dalam kod aplikasi, dan kemudian tandakan elemen untuk diputar dalam teg HTML untuk mencipta carta karusel. . Sebagai contoh, kod berikut menggunakan pemalam licin untuk mencipta karusel ringkas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
</head>
<body>
  <div class="slider">
    <div><img src="img/slider1.jpg" alt=""></div>
    <div><img src="img/slider2.jpg" alt=""></div>
    <div><img src="img/slider3.jpg" alt=""></div>
  </div>
  <script>
    $(document).ready(function(){
      $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 3000,
        arrows: false,
        dots: true,
        infinite: true,
        speed: 500,
        fade: true,
        cssEase: 'linear'
      });
    });
  </script>
</body>
</html>

Seperti yang anda lihat, kami hanya perlu menggunakan .slider pemilih CSS untuk memilih elemen untuk diputar , dan gunakan fungsi .slick() Mulakan ia. Tetapkan pilihan untuk mengkonfigurasi penampilan dan tingkah laku pemalam. Contohnya, pilihan autoplay menjadikan karusel dimainkan secara automatik, pilihan autoplaySpeed menetapkan masa tunggu automain, pilihan dots membolehkan penunjuk karusel dan seterusnya.

Kaedah 2: Gunakan JavaScript

Ia juga boleh digunakan untuk menggunakan JavaScript untuk melaksanakan fungsi karusel. Pendekatan ini biasanya lebih fleksibel daripada menggunakan pemalam jQuery, kerana ia membolehkan anda menyesuaikan animasi karusel mengikut keperluan, menambah fungsi tambahan, dsb.

Idea asas untuk melaksanakan pendekatan ini adalah untuk mencipta fungsi yang akan mengemas kini elemen untuk diputar pada setiap selang dan mengembalikan elemen pertama apabila putaran selesai. Fungsi ini boleh dilaksanakan menggunakan fungsi pengendalian acara JavaScript dan pemasa.

Berikut ialah fungsi karusel JavaScript yang mudah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <style>
    .slider{
      width: 500px;
      height: 300px;
      overflow: hidden;
    }
    .slides{
      width: 2000px;
    }
    .slides img{
      float: left;
      width: 500px;
      height: 300px;
    }
  </style>
</head>
<body>
  <div class="slider">
    <div class="slides">
      <img src="img/slider1.jpg" alt="">
      <img src="img/slider2.jpg" alt="">
      <img src="img/slider3.jpg" alt="">
    </div>
  </div>
  <script>
    var slides = document.querySelector('.slides').children;
    var count = slides.length;
    var current = 1;
    var slideWidth = 500;
    var timer;

    function slide(){
      timer = setInterval(function(){
        if(current === count){
          current = 0;
        }
        var slideOffset = current * -slideWidth;
        for(var i=0; i<count; i++){
          slides[i].style.transform = 'translateX(' + slideOffset + 'px)';
        }
        current++;
      }, 3000);
    }

    slide();
  </script>
</body>
</html>

Dalam contoh ini, kami menganggap bahawa .slides pemilih CSS memilih elemen untuk diputar. Kami menggunakan kaedah querySelector() dan atribut .children untuk mendapatkan semua elemen anak elemen ini (setiap imej) dan menyimpannya dalam pembolehubah slides. Selain itu, kami juga mentakrifkan pembolehubah lain seperti count untuk menyimpan jumlah bilangan slaid, current untuk menjejaki nombor slaid yang sedang dimainkan, slideWidth untuk menyimpan lebar setiap slaid, timer Pemasa yang digunakan untuk simpan karusel. Fungsi

slide() ialah fokus, ia menggunakan kaedah setInterval() untuk mengemas kini slaid pada setiap selang waktu. Dalam contoh ini, kami menggunakan atribut transform untuk menghidupkan slaid yang bergerak di sepanjang paksi X. Fungsi karusel dilaksanakan dengan mengemas kini pembolehubah current untuk menggelungkan semua slaid dan mulakan semula main balik apabila slaid mencapai penghujung.

Dalam rangka kerja di atas, sama ada menggunakan pemalam jQuery atau menggunakan pelaksanaan asli JavaScript, pembangun masih boleh menambah gaya dan fungsi di atasnya untuk memenuhi keperluan mereka. JavaScript ialah bahasa yang berkuasa dan digunakan secara meluas yang amat diperlukan sama ada anda sedang membangunkan tapak web baharu atau menambah fungsi pada tapak web sedia ada.

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk mencari baki dalam javascriptArtikel seterusnya：Bagaimana untuk mencari baki dalam javascript

Artikel berkaitan

Lihat lagi