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="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="image1"></li>
<li class="carousel-item"><img src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="image2"></li>
<li class="carousel-item"><img src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="image3"></li>
<li class="carousel-item"><img src="/static/imghwm/default1.png" data-src="image4.jpg" class="lazy" alt="image4"></li>
<li class="carousel-item"><img src="/static/imghwm/default1.png" data-src="image5.jpg" class="lazy" 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="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="1"></li>
<li class="carousel-item"><img src="/static/imghwm/default1.png" data-src="img/2.jpg" class="lazy" alt="2"></li>
<li class="carousel-item"><img src="/static/imghwm/default1.png" data-src="img/3.jpg" class="lazy" alt="3"></li>
<li class="carousel-item"><img src="/static/imghwm/default1.png" data-src="img/4.jpg" class="lazy" 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!
What are the limitations of React?May 02, 2025 am 12:26 AMReact'slimitationsinclude:1)asteeplearningcurveduetoitsvastecosystem,2)SEOchallengeswithclient-siderendering,3)potentialperformanceissuesinlargeapplications,4)complexstatemanagementasappsgrow,and5)theneedtokeepupwithitsrapidevolution.Thesefactorsshou
React's Learning Curve: Challenges for New DevelopersMay 02, 2025 am 12:24 AMReactischallengingforbeginnersduetoitssteeplearningcurveandparadigmshifttocomponent-basedarchitecture.1)Startwithofficialdocumentationforasolidfoundation.2)UnderstandJSXandhowtoembedJavaScriptwithinit.3)Learntousefunctionalcomponentswithhooksforstate
Generating Stable and Unique Keys for Dynamic Lists in ReactMay 02, 2025 am 12:22 AMThecorechallengeingeneratingstableanduniquekeysfordynamiclistsinReactisensuringconsistentidentifiersacrossre-rendersforefficientDOMupdates.1)Usenaturalkeyswhenpossible,astheyarereliableifuniqueandstable.2)Generatesynthetickeysbasedonmultipleattribute
JavaScript Fatigue: Staying Current with React and Its ToolsMay 02, 2025 am 12:19 AMJavaScriptfatigueinReactismanageablewithstrategieslikejust-in-timelearningandcuratedinformationsources.1)Learnwhatyouneedwhenyouneedit,focusingonprojectrelevance.2)FollowkeyblogsliketheofficialReactblogandengagewithcommunitieslikeReactifluxonDiscordt
Testing Components That Use the useState() HookMay 02, 2025 am 12:13 AMTotestReactcomponentsusingtheuseStatehook,useJestandReactTestingLibrarytosimulateinteractionsandverifystatechangesintheUI.1)Renderthecomponentandcheckinitialstate.2)Simulateuserinteractionslikeclicksorformsubmissions.3)Verifytheupdatedstatereflectsin
Keys in React: A Deep Dive into Performance Optimization TechniquesMay 01, 2025 am 12:25 AMKeysinReactarecrucialforoptimizingperformancebyaidinginefficientlistupdates.1)Usekeystoidentifyandtracklistelements.2)Avoidusingarrayindicesaskeystopreventperformanceissues.3)Choosestableidentifierslikeitem.idtomaintaincomponentstateandimproveperform
What are keys in React?May 01, 2025 am 12:25 AMReactkeysareuniqueidentifiersusedwhenrenderingliststoimprovereconciliationefficiency.1)TheyhelpReacttrackchangesinlistitems,2)usingstableanduniqueidentifierslikeitemIDsisrecommended,3)avoidusingarrayindicesaskeystopreventissueswithreordering,and4)ens
The Importance of Unique Keys in React: Avoiding Common PitfallsMay 01, 2025 am 12:19 AMUniquekeysarecrucialinReactforoptimizingrenderingandmaintainingcomponentstateintegrity.1)Useanaturaluniqueidentifierfromyourdataifavailable.2)Ifnonaturalidentifierexists,generateauniquekeyusingalibrarylikeuuid.3)Avoidusingarrayindicesaskeys,especiall
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
Zend Studio 13.0.1
Powerful PHP integrated development environment
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
