interface Web
Questions et réponses frontales
Comment créer un graphique carrousel javascript
Comment créer un graphique carrousel javascript
Comment créer un carrousel JavaScript ?
Avec le développement du développement web front-end, les images carrousel sont devenues l'un des composants communs de la plupart des sites Web et applications. Cependant, je pense que de nombreux amis qui débutent dans le développement front-end se demanderont comment créer un graphique carrousel JavaScript ?
Cet article vous expliquera comment utiliser JavaScript pour créer un graphique carrousel et vous aidera à comprendre progressivement les principes de base et les technologies courantes pour la mise en œuvre de graphiques carrousel.
1. Principes de base des images de carrousel
Les images de carrousel, comme leur nom l'indique, sont un groupe d'images qui peuvent être lues en boucle. Elles réalisent une boucle automatique ou une commutation manuelle via JavaScript, permettant aux utilisateurs de parcourir plusieurs images ou contenus. .
Le principe de base du graphique carrousel est divisé en deux parties : la structure HTML et la logique JavaScript.
Structure HTML :
La structure HTML est la base du graphique carrousel. Sa structure est à peu près la suivante :
<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>Parmi eux, .carousel est le conteneur du graphique carrousel, et .carousel-list< /code> est le conteneur de la liste d'images et <code>.carousel-item est le conteneur de chaque image individuelle. .carousel 是轮播图的容器，.carousel-list 是图片列表容器，.carousel-item 是每个单独图片的容器。
JavaScript逻辑：
JavaScript逻辑实现轮播图的核心，通常采用以下方式：
1、 获取轮播图页面元素，用 JavaScript 代码选中 HTML 中的 .carousel 元素。
var carousel = document.querySelector('.carousel');2、 获取图片列表容器和单独图片容器，
var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');3、 获取轮播图图片的宽度，
var itemWidth = items[0].offsetWidth;
4、配置切换间隔时间和定时器，
var delay = 3000; var interval;
5、配置自动播放和手动切换，
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);
}二、实现简单轮播图
现在，我们已经了解了轮播图的基本原理，并通过代码来实现了轮播图的基本效果。下面，我们将基于这一效果来实现一个简单的轮播图。
HTML结构：
<!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>JavaScript代码：
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();CSS代码：
.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;
}三、实现多种效果的轮播图
通过上面的例子，我们已经学会了如何制作一个简单的轮播图。但是，通常轮播图不仅仅只有以上的效果，我们还可以通过 JavaScript 实现更多实用的轮播图效果。
1、缓动效果
缓动效果就是让每张图片切换时速度由快到慢的效果。通过使用JavaScript通常我们可以像这样写：
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);
}2、响应式布局
响应Web设计是现代前端设计的常识，为了使轮播图能够支持不同的屏幕尺寸，更好地适应Web布局，我们需要做些额外的调整和优化。
/* 以vw为基准 */
.carousel {
position: relative;
overflow: hidden;
width: 80vw; /* 轮播图容器的宽度 */
height: calc(40vw); /* 轮播图容器的高度 */
}
/* 以persent为基准 */
.carousel-list {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
width: ${(items.length * 100)}%;
top: 0;
left: 0;
transition: left .3s;
}
.carousel-item {
float: left;
width: calc(100% / ${(items.length)});
height: 100%;
}
/* 调整图片大小 */
.carousel-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}其中，vw
rrreee
2. Obtenez le conteneur de la liste d'images et le conteneur d'images individuel, 🎜rrreee🎜3. Obtenez la largeur de l'image du carrousel, 🎜rrreee🎜4. Configurez l'intervalle de commutation et la minuterie, 🎜rrreee🎜5. lecture Switch, 🎜rrreee🎜 2. Implémenter un graphique carrousel simple🎜🎜Maintenant, nous avons compris les principes de base du graphique carrousel et implémenté l'effet de base du graphique carrousel via le code. Ci-dessous, nous allons implémenter un simple graphique carrousel basé sur cet effet. 🎜🎜Structure HTML : 🎜rrreee🎜Code JavaScript : 🎜rrreee🎜Code CSS : 🎜rrreee🎜 3. Graphique carrousel pour obtenir plusieurs effets🎜🎜Grâce à l'exemple ci-dessus, nous avons appris à créer un graphique carrousel simple. Cependant, les images de carrousel n'ont généralement pas seulement les effets ci-dessus, nous pouvons également obtenir des effets d'image de carrousel plus pratiques grâce à JavaScript. 🎜🎜1. Effet d'assouplissement🎜🎜L'effet d'assouplissement est l'effet de changer la vitesse de chaque image de rapide à lente. En utilisant JavaScript, nous pouvons généralement écrire comme ceci : 🎜rrreee🎜2. Mise en page réactive 🎜🎜La conception Web réactive est du bon sens dans la conception frontale moderne afin de permettre au graphique carrousel de prendre en charge différentes tailles d'écran et de mieux s'adapter au Web. mise en page, nous avons besoin d'ajustements et d'optimisations supplémentaires. 🎜rrreee🎜 Parmi eux, l'unitévw peut spécifier la longueur en pourcentage de la largeur de la fenêtre, et le carrousel conservera une mise en page réactive quelle que soit la façon dont la taille de l'écran change. 🎜🎜4. Résumé🎜🎜Jusqu'à présent, nous avons compris les principes de base et les méthodes de mise en œuvre de la création de carrousels via JavaScript. Grâce à des ajustements et des optimisations, nous pouvons implémenter davantage de composants de carrousel avec des styles et des effets riches, répondant ainsi bien aux besoins des utilisateurs en matière de contenu et de services Web. 🎜🎜Bien sûr, il reste encore de nombreuses difficultés techniques et détails opérationnels à maîtriser pour créer des graphiques carrousel avec JavaScript. J'espère que chacun pourra progressivement maîtriser ces compétences dans le développement réel et améliorer continuellement ses capacités de programmation. 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1658
14
1415
52
1309
25
1257
29
1231
24
Le rôle de React dans HTML: Amélioration de l'expérience utilisateur
Apr 09, 2025 am 12:11 AM
React combine JSX et HTML pour améliorer l'expérience utilisateur. 1) JSX incorpore du HTML pour rendre le développement plus intuitif. 2) Le mécanisme DOM virtuel optimise les performances et réduit les opérations DOM. 3) Interface utilisateur de gestion basée sur les composants pour améliorer la maintenabilité. 4) La gestion des états et le traitement des événements améliorent l'interactivité.
React and the frontend: construire des expériences interactives
Apr 11, 2025 am 12:02 AM
React est l'outil préféré pour construire des expériences frontales interactives. 1) Réagir simplifie le développement de l'interface utilisateur par la composontisation et le DOM virtuel. 2) Les composants sont divisés en composants de fonction et composants de classe. Les composants de fonction sont plus simples et les composants de la classe fournissent plus de méthodes de cycle de vie. 3) Le principe de travail de React repose sur le DOM virtuel et l'algorithme de réconciliation pour améliorer les performances. 4) La gestion de l'État utilise USESTATE ou This. State, et des méthodes de cycle de vie telles que ComponentDidMount sont utilisées pour une logique spécifique. 5) L'utilisation de base comprend la création de composants et la gestion de l'état, et l'utilisation avancée implique des crochets personnalisés et une optimisation des performances. 6) Les erreurs courantes incluent les mises à jour de statut et les problèmes de performance inappropriés, les compétences de débogage comprennent l'utilisation de Reactdevtools et d'excellents
React Composants: Création d'éléments réutilisables en HTML
Apr 08, 2025 pm 05:53 PM
Les composants React peuvent être définis par des fonctions ou des classes, encapsulant la logique de l'interface utilisateur et acceptant les données d'entrée via des accessoires. 1) Définissez les composants: utilisez des fonctions ou des classes pour retourner les éléments de réact. 2) Rendre le composant: React Cappel Render Method ou Exécute le composant de fonction. 3) Composants de multiplexage: passer des données à travers des accessoires pour construire une interface utilisateur complexe. L'approche du cycle de vie des composants permet d'exécuter la logique à différentes étapes, améliorant l'efficacité de développement et la maintenabilité du code.
Développement frontal avec React: Avantages et techniques
Apr 17, 2025 am 12:25 AM
Les avantages de React sont sa flexibilité et son efficacité, qui se reflètent dans: 1) la conception basée sur les composants améliore la réutilisabilité du code; 2) La technologie DOM virtuelle optimise les performances, en particulier lors de la gestion de grandes quantités de mises à jour de données; 3) L'écosystème riche fournit un grand nombre de bibliothèques et d'outils tiers. En comprenant comment React fonctionne et utilise des exemples, vous pouvez maîtriser ses concepts principaux et les meilleures pratiques pour créer une interface utilisateur efficace et maintenable.
L'écosystème de React: bibliothèques, outils et meilleures pratiques
Apr 18, 2025 am 12:23 AM
L'écosystème React comprend des bibliothèques de gestion d'État (telles que Redux), des bibliothèques de routage (telles que Reactrouter), des bibliothèques de composants d'interface utilisateur (telles que Material-UI), des outils de test (tels que la plaisanterie) et de la construction d'outils (tels que WebPack). Ces outils fonctionnent ensemble pour aider les développeurs à développer et à maintenir efficacement les applications, à améliorer la qualité du code et l'efficacité de développement.
React: La puissance d'une bibliothèque JavaScript pour le développement Web
Apr 18, 2025 am 12:25 AM
React est une bibliothèque JavaScript développée par Meta pour la création d'interfaces utilisateur, avec son cœur étant le développement des composants et la technologie DOM virtuelle. 1. Gestion des composants et de l'État: React gère l'état à travers les composants (fonctions ou classes) et les crochets (tels que UseState), améliorant la réutilisabilité et la maintenance du code. 2. Dom virtuel et optimisation des performances: via Virtual Dom, React met à jour efficacement le DOM réel pour améliorer les performances. 3. Cycle de vie et crochets: les crochets (tels que l'utilisation d'effet) permettent aux composants de la fonction de gérer les cycles de vie et d'effectuer des opérations à effet secondaire. 4. Exemple d'utilisation: des composants de Basic Helloworld à la gestion avancée de l'État mondial (UseContext et
React vs frameworks backend: une comparaison
Apr 13, 2025 am 12:06 AM
React est un cadre frontal pour la construction d'interfaces utilisateur; Un framework back-end est utilisé pour créer des applications côté serveur. React fournit des mises à jour d'interface utilisateur composentisées et efficaces, et le framework backend fournit une solution de service backend complète. Lors du choix d'une pile technologique, les exigences du projet, les compétences en équipe et l'évolutivité doivent être prises en compte.
L'avenir de React: Tendances et innovations dans le développement Web
Apr 19, 2025 am 12:22 AM
L'avenir de React se concentrera sur l'ultime dans le développement des composants, l'optimisation des performances et l'intégration profonde avec d'autres piles technologiques. 1) React simplifiera encore la création et la gestion des composants et promouvra l'ultime dans le développement des composants. 2) L'optimisation des performances deviendra le centre d'attention, en particulier dans les grandes applications. 3) React sera profondément intégré à des technologies telles que GraphQL et TypeScript pour améliorer l'expérience de développement.
