Comment obtenir un effet carrousel d'images publicitaires avec JavaScript

Avec le développement et la popularité de la publicité sur Internet, l'espace publicitaire sur les sites Web est devenu l'une des entrées importantes vers divers sites Web. Comment obtenir un effet carrousel publicitaire beau et pratique sur le site Web est également devenu une question importante à laquelle les développeurs de sites Web prêtent attention. Dans cet article, nous présenterons une méthode de mise en œuvre basée sur JavaScript pour un carrousel d'images publicitaires.

1. Principes de base du carrousel

Le carrousel d'images fait référence au changement automatique ou manuel d'images sur une page Web dans un certain intervalle de temps, parcourant ainsi plusieurs images pour afficher plusieurs informations. Pour implémenter cette fonction, JavaScript doit être utilisé.

JavaScript lui-même est un langage basé sur des événements qui déclenche l'exécution de code via divers événements sur la page qui interagissent avec les utilisateurs (tels que des clics de souris, des survols de souris, des événements de clavier, etc.). Dans les images de carrousel, nous pouvons associer des boutons de changement d'image, des intervalles de temps de changement d'image, des effets de transition entre les images, etc. avec des événements JavaScript pour obtenir un défilement automatique et un fonctionnement manuel des images.

2. Détails techniques de la mise en œuvre du carrousel

Sur la base des principes de base du carrousel ci-dessus, les détails techniques spécifiques de la mise en œuvre sont présentés ci-dessous.

1. Conception de la mise en page

Concevez d'abord un élément conteneur, avec plusieurs éléments d'image imbriqués à l'intérieur de l'élément conteneur. Les éléments de l'image utilisent le même style et ont une largeur et une hauteur fixes, de sorte qu'il n'y aura aucun problème tel qu'un désalignement dû à des tailles différentes lors de la rotation des images. Utilisez le positionnement absolu dans les éléments du conteneur afin que les éléments d'image individuels apparaissent dans la même position.

2. Commutation d'image

La fonction de commutation automatique et manuelle des images est réalisée via du code JavaScript. Pour la commutation automatique, vous devez envisager d'utiliser une minuterie, tandis que la commutation manuelle peut être réalisée à l'aide d'événements de survol et de clic de souris.

3. Indicateur de mise au point

Concevez une barre d'indicateur de mise au point suspendue en bas afin que la mise au point de l'image actuelle puisse être clairement exprimée. La barre indicatrice de mise au point est généralement constituée d'un certain nombre de petits points, et les points correspondant à l'image actuelle sont distingués (par exemple en changeant de couleur). Lorsqu'ils sont implémentés au niveau du code JavaScript, les petits points correspondant à l'image peuvent être modifiés en conséquence en fonction du numéro ou de l'index de chaque image.

4. Effet de transition

Afin de rendre l'effet carrousel d'images plus fluide et naturel, vous devez utiliser des effets de transition. Les effets de transition peuvent afficher les effets d'affichage correspondants lors de la transition d'une image à l'autre, tels que le fondu entrant et sortant, la rotation et le zoom, etc. Pendant le processus de mise en œuvre, vous pouvez utiliser les effets de transition CSS3 ou utiliser JavaScript pour obtenir des effets de transition.

3. Exemple de code d'implémentation de carrousel

Ce qui suit fournit un exemple de code JavaScript pour montrer comment utiliser JavaScript pour obtenir un effet carrousel d'images une par une. À travers cet exemple, vous pouvez voir que le carrousel d’images n’est pas difficile et ne nécessite que quelques connaissances de base en HTML, CSS et JavaScript pour être mis en œuvre.

Le code HTML est le suivant :

<div id="img_container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>
<div id="indicators"></div>

Le div#img_container est un conteneur d'image, et chaque balise img est imbriquée dans le conteneur à son tour ; #indicators est un conteneur d'indicateurs qui contient plusieurs éléments d'indicateur. div#img_container是图片容器，每一个img标签依次嵌套在容器中；div#indicators是指示器容器，包含多个指示器元素。

CSS代码如下：

#img_container{
  position:relative;
  overflow:hidden;
  height:400px;
  width:600px;
}

#img_container img{
  position:absolute;
  width:600px;
  height:400px;
  z-index:1;
  opacity:0;
  transition:opacity 1s ease-in-out;
}

#img_container img.active{
  opacity:1;
  z-index:2;
}

#indicators{
  position:absolute;
  width:100%;
  bottom:20px;
  text-align:center;
}

.indicator{
  display:inline-block;
  height:10px;
  width:10px;
  border-radius:50%;
  margin:0 10px;
}

.indicator.active{
  background-color:red;
}

其中的#img_container使用了CSS中的position:relative属性，来定义图片容器内部的元素采用相对位置进行布局；opacity属性设置透明度，transition属性为过渡属性；#indicators则定位在底部，使用居中文本对齐来居中。.indicator则是指示器的样式。

JavaScript代码如下：

const container = document.getElementById('img_container');
const images = container.querySelectorAll('img');
const indicators = document.getElementById('indicators');
const dots = [];

let currentImgIndex = 0;
let interval;

images[currentImgIndex].classList.add('active');

for(let i = 0; i < images.length; i++){
  const dot = document.createElement(&#39;span&#39;);
  dot.className = "indicator";
  dot.addEventListener(&#39;click&#39;, () => {
    clearInterval(interval);
    currentImgIndex = i;
    updateImages();
    autoNext();
  });
  indicators.appendChild(dot);
  dots.push(dot);
}

function updateImages(){
  images.forEach(image => image.classList.remove('active'));
  dots.forEach(dot => dot.classList.remove('active'));
  images[currentImgIndex].classList.add('active');
  dots[currentImgIndex].classList.add('active');
}

function autoNext(){
  clearInterval(interval);
  interval = setInterval(() => {
    currentImgIndex++;
    if(currentImgIndex >= images.length){
      currentImgIndex = 0;
    }
    updateImages();
  }, 3000);
}

autoNext();

在JavaScript代码中，首先获取到容器元素和内部的图像元素，通过设置当前图片的索引值（currentImgIndex）和定时器setInterval来控制图片轮播的效果。同时，用updateImages()来更新当前图片和焦点指示器的激活状态，用autoNext()

Le code CSS est le suivant :

rrreee

Le #img_container utilise l'attribut position:relative en CSS pour définir la disposition des éléments à l'intérieur du conteneur d'image en utilisant le relatif positions ; L'attribut opacity définit la transparence, l'attribut transition est un attribut de transition #indicators est positionné en bas et centré en utilisant l'alignement du texte centré ; . .indicator est le style de l'indicateur.

Le code JavaScript est le suivant : 🎜rrreee🎜Dans le code JavaScript, récupérez d'abord l'élément conteneur et l'élément image interne, et définissez la valeur d'index de l'image actuelle (currentImgIndex) et le minuteur setInterval pour contrôler l'effet du carrousel d'images. En même temps, utilisez <code>updateImages() pour mettre à jour l'état d'activation de l'image actuelle et de l'indicateur de mise au point, et utilisez autoNext() pour obtenir l'effet carrousel automatique. 🎜🎜IV. Résumé🎜🎜Cet article présente les principes de base et les détails techniques de mise en œuvre de l'utilisation de JavaScript pour implémenter un carrousel d'images publicitaires, y compris le changement d'image, l'indication de mise au point, les effets de transition, etc. Les exemples de code présentés peuvent également être utilisés comme référence dans des applications réelles pour mieux implémenter la fonction de rotation des annonces sur les pages Web. Bien entendu, à mesure que la technologie JavaScript continue d’être mise à jour, cette implémentation peut également changer. 🎜

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!