Comment créer un graphique carrousel javascript-Questions et réponses frontales-php.cn

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>

Copier après la connexion

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');

Copier après la connexion

2、获取图片列表容器和单独图片容器，

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

Copier après la connexion

3、获取轮播图图片的宽度，

var itemWidth = items[0].offsetWidth;

Copier après la connexion

4、配置切换间隔时间和定时器，

var delay = 3000;
var interval;

Copier après la connexion

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);
}

Copier après la connexion

二、实现简单轮播图

现在，我们已经了解了轮播图的基本原理，并通过代码来实现了轮播图的基本效果。下面，我们将基于这一效果来实现一个简单的轮播图。

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>

Copier après la connexion

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();

Copier après la connexion

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;
}

Copier après la connexion

三、实现多种效果的轮播图

通过上面的例子，我们已经学会了如何制作一个简单的轮播图。但是，通常轮播图不仅仅只有以上的效果，我们还可以通过 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);
}

Copier après la connexion

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;
}

Copier après la connexion

其中，vw

Logique JavaScript :

La logique JavaScript implémente le cœur du graphique carrousel, généralement de la manière suivante :

1 Obtenez l'élément de page du graphique carrousel et utilisez le code JavaScript pour sélectionner l'élément .carousel en HTML.

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!