Home >Web Front-end >JS Tutorial >How to create an auto-scrolling carousel using HTML, CSS and jQuery

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

WBOYOriginal: 2023-10-24 08:37:581420browse

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>

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></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);
});

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!

JavaScript jquery css html 循环 JS overflow

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to create a sticky top navigation using HTML, CSS and jQueryNext article：How to create a sticky top navigation using HTML, CSS and jQuery

See more

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

Related articles