code de rotation d'image javascript

Code de rotation d'image JavaScript

Dans le développement Web, la rotation d'image est une fonction souvent utilisée. Par exemple, dans des scénarios tels que l'affichage de produits et les images de carrousel, nous devrons afficher plusieurs images et changer d'image à un certain intervalle de temps. En JavaScript, nous pouvons implémenter la fonction de rotation d'image via quelques codes simples.

Idée

Il existe de nombreuses façons d'implémenter la rotation d'images. Cet article présentera une méthode basée sur la syntaxe native JavaScript. Les idées spécifiques sont les suivantes :

1. . Utilisez un tableau pour stocker les informations sur l'image.

2. Ensuite, nous devons définir un compteur pour enregistrer à quelle image de la liste se trouve l'image actuelle.

3. Ensuite, nous pouvons ajouter dynamiquement des images à la page en appelant l'API DOM de JavaScript.

4. Enfin, nous devons régler une minuterie pour mettre à jour le compteur de temps en temps et passer à l'affichage de l'image suivante.

Étapes de mise en œuvre

Tout d'abord, nous devons préparer une liste d'images. Ici, nous pouvons utiliser un tableau JavaScript pour stocker les informations sur l'image. Chaque élément du tableau est un objet, y compris l'URL et l'alt de l'image.

let images = [
    { url: './img/1.jpg', alt: 'pic1' },
    { url: './img/2.jpg', alt: 'pic2' },
    { url: './img/3.jpg', alt: 'pic3' },
    { url: './img/4.jpg', alt: 'pic4' },
    { url: './img/5.jpg', alt: 'pic5' }
];

Ensuite, nous définissons une variable de compteur currentIdx pour enregistrer le numéro de série de l'image en cours d'affichage. Étant donné que l'indexation des tableaux commence à 0, la valeur initiale de currentIdx doit être 0. currentIdx，用来记录当前正在显示的图片序号。因为数组索引从 0 开始，所以 currentIdx 的初始值应该为 0。

let currentIdx = 0;

然后，我们可以通过 JavaScript 的 DOM API 来动态创建一个 img 元素，并将其添加到页面中。

let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);

需要注意的是，这里将新创建的 img 元素添加到一个 id 为 imgWrapper 的元素中，在页面中我们需要先定义这个元素。

<div id="imgWrapper"></div>

接下来，我们需要设置定时器来每隔一定时间切换显示下一张图片。在 JavaScript 中，我们可以通过 setTimeout 或 setInterval 函数来实现。这里我们选择使用 setInterval。

let intervalId = setInterval(function() {
    currentIdx++;
    if (currentIdx >= images.length) {
        currentIdx = 0;
    }
    img.src = images[currentIdx].url;
    img.alt = images[currentIdx].alt;
}, 3000);

上面的代码中，setInterval

window.onunload = function() {
    clearInterval(intervalId);
};

Ensuite, nous pouvons créer dynamiquement un élément img via l'API DOM de JavaScript et l'ajouter à la page.

let images = [
    { url: './img/1.jpg', alt: 'pic1' },
    { url: './img/2.jpg', alt: 'pic2' },
    { url: './img/3.jpg', alt: 'pic3' },
    { url: './img/4.jpg', alt: 'pic4' },
    { url: './img/5.jpg', alt: 'pic5' }
];

let currentIdx = 0;

let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);

let intervalId = setInterval(function() {
    currentIdx++;
    if (currentIdx >= images.length) {
        currentIdx = 0;
    }
    img.src = images[currentIdx].url;
    img.alt = images[currentIdx].alt;
}, 3000);

window.onunload = function() {
    clearInterval(intervalId);
};

Il convient de noter que l'élément img nouvellement créé est ajouté à un élément avec l'identifiant imgWrapper. Nous devons d'abord définir cet élément dans la page.

rrreee

Ensuite, nous devons régler une minuterie pour afficher l'image suivante à une certaine heure. En JavaScript, nous pouvons y parvenir grâce à la fonction setTimeout ou setInterval. Ici, nous choisissons d'utiliser setInterval.

rrreee

Dans le code ci-dessus, le premier paramètre de la fonction setInterval est une fonction anonyme. Cette fonction est utilisée pour mettre à jour le numéro de série et les informations d'image de l'image actuelle, et l'attribuer au src. et les informations d'image de l'élément img. Le deuxième paramètre est l'intervalle de temps du timer, en millisecondes. Par exemple, dans le code ci-dessus, la fonction anonyme sera exécutée toutes les 3 000 millisecondes (soit 3 secondes).

Enfin, nous devons effacer le minuteur lorsque la page est déchargée, sinon cela pourrait provoquer une fuite de mémoire.

rrreee

Code complet🎜🎜En intégrant les codes ci-dessus, nous obtenons un code complet de rotation d'image basé sur la syntaxe native JavaScript. 🎜rrreee🎜Résumé🎜🎜Dans cet article, nous vous présentons un code de rotation d'image implémenté à l'aide de la syntaxe native JavaScript. En étudiant cet article, vous pouvez apprendre à utiliser les tableaux JavaScript, l'API DOM et les minuteries pour implémenter la rotation des images. Bien entendu, ce code n’est que le code de base et vous pouvez le modifier et l’optimiser en fonction des besoins réels. 🎜

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!