Bagaimana untuk mencipta karusel tatal automatik menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Bagaimana untuk mencipta karusel tatal automatik menggunakan HTML, CSS dan jQuery

WBOY

Lepaskan： 2023-10-24 08:37:58

asal

1375 orang telah melayarinya

Bagaimana untuk mencipta karusel tatal automatik menggunakan HTML, CSS dan jQuery

Cara mencipta karusel tatal automatik menggunakan HTML, CSS dan jQuery

Dengan perkembangan Internet, karusel telah menjadi salah satu elemen biasa dan perlu dalam reka bentuk web. Menggunakan karusel pada halaman utama tapak web atau halaman paparan produk boleh memaparkan berbilang imej atau kandungan dengan jelas, menarik perhatian pengguna dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta carta karusel yang menatal secara automatik dan memberikan contoh kod khusus, dengan harapan dapat membantu pemula.

Pertama, kita perlu mewujudkan struktur asas karusel dalam fail HTML. Berikut ialah contoh kod HTML mudah:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自动滚动轮播图</title>
  <style>
    .slider {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }
    .slider .slides {
      width: 300%;
      height: 100%;
      display: flex;
    }
    .slider .slides .slide {
      width: 33.33%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img src="slide1.jpg" alt="Slide 1">
      </div>
      <div class="slide">
        <img src="slide2.jpg" alt="Slide 2">
      </div>
      <div class="slide">
        <img src="slide3.jpg" alt="Slide 3">
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta bekas karusel bernama .slider dan menetapkan lebar bekas kepada 600px dan ketinggian kepada 400px Dan tetapkan < code>overflow: hidden untuk menyembunyikan kandungan yang melebihi saiz bekas. Dalam kelas .slides, lebar bekas imej karusel ditetapkan kepada 300% (iaitu, tiga kali lebar setiap imej Dengan menetapkan lebar .slide<). /code> kelas kepada 33.33% menyusun tiga gambar secara sama rata dalam satu baris. <code>.slider的轮播图容器，设置了容器的宽度为600px，高度为400px，并设置overflow: hidden来隐藏超出容器大小的内容。在.slides类中设置了轮播图图片的容器宽度为300%（即每张图片宽度的三倍），通过设置.slide类的宽度为33.33%将三张图片均匀地排列在一行内。

接下来，我们需要使用jQuery来实现轮播图的自动滚动效果。我们将代码写在一个名为script.js的外部JavaScript文件中（也可以写在HTML文件内的<script>标签中）。下面是一个简单的jQuery代码示例：

$(document).ready(function() {
  var slideCount = $('.slide').length;
  var slideWidth = $('.slide').width();
  var slideHeight = $('.slide').height();
  var slideContainerWidth = slideCount * slideWidth;
  
  $('.slides').css({ width: slideContainerWidth, marginLeft: -slideWidth });
  
  function slideNext() {
    $('.slides').animate({
      left: -slideWidth
    }, 1000, function() {
      $('.slide:first-child').appendTo('.slides');
      $('.slides').css('left', '');
    });
  }
  
  setInterval(slideNext, 2000);
});

Salin selepas log masuk

在上述代码中，我们首先使用$(document).ready()方法来确保页面加载完成后执行代码。然后，我们获取轮播图的总数量、图片宽度、图片高度以及轮播图容器的宽度。通过设置.slides的宽度为slideContainerWidth并将其marginLeft属性设置为-slideWidth，我们将第一张图片的一部分隐藏在容器之外。

接下来，我们定义一个名为slideNext()的函数来实现轮播图的滚动效果。使用.animate()方法，我们将.slides向左移动一个slideWidth的距离，持续时间为1000毫秒（即1秒）。当动画完成后，我们将第一张图片移动到.slides的末尾，并将.slides的left属性重置为空。这样就实现了图片的无缝滚动效果。

最后，我们使用setInterval()函数来循环执行slideNext()

Seterusnya, kita perlu menggunakan jQuery untuk mencapai kesan tatal automatik karusel. Kami menulis kod dalam fail JavaScript luaran yang dipanggil script.js (ia juga boleh ditulis dalam teg <script> dalam fail HTML). Berikut ialah contoh kod jQuery yang mudah:

rrreee

Dalam kod di atas, kami mula-mula menggunakan kaedah $(document).ready() untuk memastikan kod tersebut dilaksanakan selepas halaman dimuatkan. Kemudian, kami mendapat jumlah bilangan imej karusel, lebar imej, ketinggian imej dan lebar bekas imej karusel. Dengan menetapkan lebar .slides kepada slideContainerWidth dan menetapkan sifat marginLeftnya kepada -slideWidth, kami menyembunyikan sebahagian daripada imej pertama dalam bekas di luar . 🎜🎜Seterusnya, kami mentakrifkan fungsi bernama slideNext() untuk melaksanakan kesan tatal karusel. Menggunakan kaedah .animate(), kami mengalihkan .slides jarak slideWidth ke kiri untuk tempoh 1000 milisaat (iaitu 1 saat) . Apabila animasi selesai, kami mengalihkan imej pertama ke penghujung .slides dan menetapkan semula sifat kiri .slides kepada kosong. Ini mencapai kesan tatal yang lancar untuk imej. 🎜🎜Akhir sekali, kami menggunakan fungsi setInterval() untuk menggelungkan fungsi slideNext() dan tatal setiap 2 saat. 🎜🎜Menggunakan kod di atas, anda boleh membuat dan menjalankan karusel dengan kesan tatal automatik. Anda boleh menyesuaikan saiz, bilangan imej dan kelajuan menatal bekas karusel mengikut keperluan. Saya harap artikel ini dapat membantu anda belajar menggunakan HTML, CSS dan jQuery untuk mencipta karusel! 🎜

Atas ialah kandungan terperinci Bagaimana untuk mencipta karusel tatal automatik menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!