How to create an auto-scrolling carousel using HTML, CSS and jQuery-JS Tutorial-php.cn

How to create an auto-scrolling carousel using HTML, CSS and jQuery

WBOY

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

Original

1378 people have browsed it

How to create an auto-scrolling carousel using HTML, CSS and jQuery

How to create an automatically scrolling carousel using HTML, CSS and jQuery

With the development of the Internet, carousels have become common and necessary in web design One of the elements of preparation. Using carousels on website homepages or product display pages can vividly display multiple images or content, attracting users' attention and improving user experience. This article will introduce how to use HTML, CSS and jQuery to create an automatically scrolling carousel chart, and provide specific code examples, hoping to be helpful to beginners.

First, we need to establish the basic structure of the carousel in the HTML file. The following is a simple HTML code example:

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

Copy after login

In the above code, we created a carousel container named .slider and set the width and height of the container to 600px to 400px, and set overflow: hidden to hide content that exceeds the container size. In the .slides class, the container width of the carousel picture is set to 300% (that is, three times the width of each picture). By setting the width of the .slide class to 33.33% Arrange the three pictures evenly in a row.

Next, we need to use jQuery to achieve the automatic scrolling effect of the carousel. We write the code in an external JavaScript file named script.js (it can also be written in the <script> tag inside the HTML file). Here is a simple jQuery code example:

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

Copy after login

In the above code, we first use the $(document).ready() method to ensure that the code is executed after the page is loaded. Then, we get the total number of carousel images, image width, image height, and width of the carousel image container. By setting the width of .slides to slideContainerWidth and setting its marginLeft property to -slideWidth, we hide part of the first image from the container.

Next, we define a function named slideNext() to implement the scrolling effect of the carousel. Using the .animate() method, we move .slides a slideWidth distance to the left for a duration of 1000 milliseconds (i.e. 1 second). When the animation is complete, we move the first image to the end of .slides and reset the left property of .slides to empty. This achieves a seamless scrolling effect for images.

Finally, we use the setInterval() function to loop the slideNext() function, scrolling every 2 seconds.

Using the above code, you can create and run a carousel chart with automatic scrolling effect. You can customize the size, number of images, and scrolling speed of the carousel container as needed. I hope this article can help you learn to use HTML, CSS and jQuery to create carousels!

The above is the detailed content of How to create an auto-scrolling carousel using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!