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()來更新當前圖片和焦點指示器的激活狀態(tài)，用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!