How to make a javascript carousel chart-Front-end Q&A-php.cn

How to make a javascript carousel chart

王林

Release： 2023-05-09 09:22:06

Original

1186 people have browsed it

How to make a JavaScript carousel?

With the development of Web front-end development, carousel images have become one of the common components of most websites and applications. However, I believe that many friends who are new to front-end development will ask, how to make a JavaScript carousel chart?

This article will introduce you to how to use JavaScript to create a carousel chart, and help you gradually understand the basic principles and common technologies for implementing carousel charts.

1. The basic principle of the carousel chart

The carousel chart, as the name suggests, is a group of pictures that can be played in a loop. It realizes automatic looping or manual switching through JavaScript, allowing users to browse through it. Multiple images or content.

The basic principle of the carousel chart is divided into two parts: HTML structure and JavaScript logic.

HTML structure:

HTML structure is the basis of the carousel chart. Its structure is roughly as follows:

<div class="carousel">
  <ul class="carousel-list">
    <li class="carousel-item"><img src="image1.jpg" alt="image1"></li>
    <li class="carousel-item"><img src="image2.jpg" alt="image2"></li>
    <li class="carousel-item"><img src="image3.jpg" alt="image3"></li>
    <li class="carousel-item"><img src="image4.jpg" alt="image4"></li>
    <li class="carousel-item"><img src="image5.jpg" alt="image5"></li>
  </ul>
</div>

Copy after login

Among them, .carousel is the carousel chart container, .carousel-list is the image list container, .carousel-item is the container for each individual image.

JavaScript logic:

JavaScript logic implements the core of the carousel chart, usually in the following ways:

1. Get the carousel chart page element, and use JavaScript code to select the HTML The .carousel element.

var carousel = document.querySelector('.carousel');

Copy after login

2. Get the image list container and individual image container,

var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');

Copy after login

3. Get the width of the carousel image,

var itemWidth = items[0].offsetWidth;

Copy after login

4. Configure the switching interval and timing 5. Configure automatic playback and manual switching,

var delay = 3000;
var interval;

Copy after login

2. Implement a simple carousel chart

Now, we have understood the basic principles of the carousel chart , and achieved the basic effect of the carousel chart through code. Below, we will implement a simple carousel chart based on this effect.

HTML structure:

function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        if(left <= itemWidth - list.offsetWidth) {
            list.style.left = "0px";
        } else {
            list.style.left = left + 'px';
        }
    }, delay);
}

function stopCarousel() {
    clearInterval(interval);
}

Copy after login

JavaScript code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple Carousel</title>  
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div class="carousel">
      <ul class="carousel-list">
        <li class="carousel-item"><img src="img/1.jpg" alt="1"></li>
        <li class="carousel-item"><img src="img/2.jpg" alt="2"></li>
        <li class="carousel-item"><img src="img/3.jpg" alt="3"></li>
        <li class="carousel-item"><img src="img/4.jpg" alt="4"></li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Copy after login

CSS code:

var carousel = document.querySelector('.carousel');
var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');
var itemWidth = items[0].offsetWidth; 
var delay = 3000;
var interval;

// 自动播放
function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        if(left <= itemWidth - list.offsetWidth) {
            list.style.left = "0px";
        } else {
            list.style.left = left + 'px';
        }
    }, delay);
}

// 手动切换
function stopCarousel() {
    clearInterval(interval);
}

// 启动轮播
startCarousel();

Copy after login

3. Carousel images to achieve multiple effects

Through the above example, we have learned how to make a simple carousel chart. However, usually carousel images do not only have the above effects, we can also achieve more practical carousel image effects through JavaScript.

1. Easing effect

Easing effect is the effect of changing the speed of each picture from fast to slow when switching. By using JavaScript, we can usually write like this:

.carousel {
  position: relative;
  overflow: hidden;
  width: 400px;           /* 轮播图容器的宽度 */
  height: 300px;          /* 轮播图容器的高度 */
}
.carousel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: ${(items.length * 100)}%;
}
.carousel-item {
  float: left;
  width: calc(100% / ${(items.length)});
}
.carousel-item img {
  display: block;
  width: 100%;
  height: auto;
}

Copy after login

2. Responsive layout

Responsive Web design is common sense in modern front-end design. In order to enable the carousel to support different screen sizes, To better adapt to the web layout, we need to make additional adjustments and optimizations.

function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        var startTime = Date.now();
        var easing = function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        };
        var animate = function() {
            var time = Date.now() - startTime;
            var easingLeft = easing(time, parseInt(list.style.left), -itemWidth, delay);
            if(time <= delay) {
                list.style.left = easingLeft + 'px';
                requestAnimationFrame(animate);
            } else {
                list.style.left = -itemWidth + 'px';
                list.appendChild(items[0]);
            }
        };
        requestAnimationFrame(animate);
    }, delay);
}

Copy after login

Among them,

The unit can specify the length as a percentage of the width of the viewport, and the carousel will maintain a responsive layout regardless of how the screen size changes. 4. Summary

So far, we have understood the basic principles and implementation methods of creating carousels through JavaScript. Through adjustments and optimizations, we can implement more carousel components with rich styles and effects, thus well meeting user needs for web content and services.

Of course, there are still many technical difficulties and operational details that need to be mastered in making carousels with JavaScript. I hope that everyone can gradually master these skills in actual development and continuously improve their programming abilities.

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