How to do carousel with javascript-Front-end Q&A-php.cn

How to do carousel with javascript

PHPz

Release： 2023-04-21 10:26:54

Original

784 people have browsed it

JavaScript is a programming language widely used in web development. It can be used for many different functions, such as dynamically updating website content, handling form input, controlling painting and animation effects, and creating interactive user interfaces. Among them, JavaScript can also be used to create carousels to make the website more attractive and provide users with better visual effects and better user experience.

In the implementation of carousel images, JavaScript is often used to control the rotation and switching of images. It uses event handling and timers (setTimeout and setInterval) to implement the carousel function. The following are some common carousel chart implementation methods.

Method 1: Utilizing jQuery plug-ins

jQuery is a popular JavaScript library, and due to its widespread use, many carousel plug-ins have been written for jQuery, which is convenient and easy to use. These plugins often include many preconfigured options, making them ideal for a variety of different websites and applications.

Using the jQuery plug-in, you can quickly implement the carousel function. Just import the plug-in file into the application code, and then mark the elements to be rotated in the HTML tag to create a carousel chart. For example, the following code uses the slick plug-in to create a simple carousel:

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

Copy after login

As you can see, we only need to use the .slider CSS selector to select the elements to be rotated, and use .slick() function initializes it. Set options to configure the plugin's appearance and behavior. For example, the autoplay option makes the carousel play automatically, the autoplaySpeed option sets the autoplay wait time, the dots option enables the carousel indicator, and so on.

Method 2: Use JavaScript

It is also feasible to use JavaScript to implement the carousel function. This approach is generally more flexible than using a jQuery plugin, as it allows you to customize the carousel animation as needed, add additional functionality, etc.

The basic idea of implementing this method is to create a function that will update the elements to be rotated at each interval and return the first element when the rotation is completed. This function can be implemented using JavaScript event handling functions and timers.

Here is a simple JavaScript carousel function:

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

Copy after login

In this example, we assume that the .slides CSS selector selects the elements to be rotated. We use the querySelector() method and the .children attribute to get all the child elements of the element (each picture) and store them in the slides variable. In addition, we also define other variables, such as count for storing the total number of slides, current for tracking the currently playing slide number, slideWidth for Used to store the width of each slide, timer is used to store the timer of the carousel. The

slide() function is the focus, it uses the setInterval() method to update the slide at each interval. In this example, we use the transform property to animate the slide moving along the X-axis. The carousel functionality is implemented by updating the current variable to loop through all slides and restart playback when the slide reaches the end.

In the above framework, whether using a jQuery plug-in or a native implementation of JavaScript, developers can still add styles and functionality on top of it to meet their needs. JavaScript is a powerful and widely used language that is indispensable whether you are developing a new website or adding functionality to an existing website.

The above is the detailed content of How to do carousel with javascript. For more information, please follow other related articles on the PHP Chinese website!