Home > Article > Web Front-end > How to make a javascript carousel chart
How to make a javascript carousel chart
- 王林Original
- 2023-05-09 09:22:061147browse
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>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');2. Get the image list container and individual image container,
var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');3. Get the width of the carousel image,
var itemWidth = items[0].offsetWidth;
4. Configure the switching interval and timing 5. Configure automatic playback and manual switching,
var delay = 3000; var interval;
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);
}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>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();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;
}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);
}Among them,
vw 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!