Native js implémente un graphique carrousel automatique

Les images de carrousel sont actuellement l'un des effets les plus courants sur les pages de sites Web et sont utilisées sur de nombreux sites Web, tels que Taobao, JD.com, etc. Certains onglets automatiques sont également requis et sont hautement reproductibles. Partagez ici, utilisez le code natif js pour obtenir les effets courants des images carrousel !

Le principe de l'image carrousel

Une série d'images de taille égale est carrelée, en utilisant la disposition CSS pour afficher une seule image et masquer le reste. Utilisez la minuterie pour réaliser une lecture automatique en calculant le décalage.

Mise en page HTML

Tout d'abord, la bannière du conteneur parent stocke tout le contenu et la liste img du conteneur enfant stocke les images. La liste des sous-conteneurs stocke les points des boutons. J'ai utilisé une image de fond pour les points !

<p id="banner">
    <ul id="img-list">  
       
        <li><img src="images/banner1.png" alt="1"/></li>
        <li><img src="images/banner2.jpg" alt="2"/></li>
        <li><img src="images/banner3.png" alt="3"/></li>

    </ul>
    <p id="list">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
    </p>
</p>

modification CSS

1. Comprendre le modèle de boîte, le flux de documents et les problèmes de positionnement absolu.

2. Les images ont une largeur et une hauteur fixes. Définissez d'abord la largeur totale des trois images dans la liste img et masquez l'excédent avec overflow : caché ;! Chargez et faites flotter le paramètre li sous l'image à droite.

3. Corrigez la largeur et la hauteur de l'étendue de la liste et donnez-lui une image d'arrière-plan. Définissez une image de point jaune par défaut sur la première image.

#banner {
    width:100%;
    padding:0;
    clear: both;
    position: relative;
    height: 400px;
    z-index:1;
}

#img-list {
    display: block;
    width:5760px;
    height: 400px;
    overflow: hidden;
    z-index:1;
    position: relative;
}
#img-list li{
    float: left;
    width:100%;
    height: 400px;
    overflow: hidden;
    /* position: absolute;
    top:0;
    left:0; */
    z-index: 2;
}
#list {
    width:100%;
    height:18px;
    text-align: center;
    position: absolute;
    bottom: 10px;
    z-index: 100;
}
#list > span {
    width:18px;
    height: 18px;
    overflow: hidden;
    display: inline-block;
    margin:0 2px;
    background: url(../images/yuan.png);
    cursor: pointer;
}
#list .on {
    background: url(../images/huanyu.png);
}

Effet JS

1. Tout d'abord, nous définissons la fonction de lecture automatique

2. Ensuite, la lecture s'arrête lorsque la souris glisse sur le conteneur et continue lorsque la souris. quitte le conteneur entier. Jouer au suivant.

3. Définissez et appelez la fonction de lecture automatique

var banner=document.getElementById('banner');
  var imglist=document.getElementById('img-list').getElementsByTagName("li");
  var list=document.getElementById('list').getElementsByTagName('span');
var index=0;
  var timer=null;
 //设置自动播放函数
  function autoPlay () {
      if (++index >= imglist.length) {index = 0};
      changeImg(index);
  }

  // 鼠标划过整个容器时停止自动播放
  banner.onmouseover = function () {
      clearInterval(timer);
  }

  // 鼠标离开整个容器时继续播放至下一张
  banner.onmouseout=function(){
      timer=setInterval(autoPlay,2000);
  }
  / 定义并调用自动播放函数
  timer = setInterval(autoPlay, 2000);

Puis définissez la fonction de commutation de l'image

// 定义图片切换函数
  function changeImg (curIndex) {
      for (var i = 0; i < imglist.length; i++) {

          imglist[i].style.display = "none";
          list[i].className = "";
      }
      imglist[curIndex].style.display = "block";
      list[curIndex].className = "on";
  }

Enfin, parcourez toute la navigation numérique pour obtenir une commutation par balayage. à l'image correspondante doit obtenir sa valeur d'index

for (var i = 0; i < list.length; i++) {
  list[i].index=i;
 list[i].onmouseover = function () {
 clearInterval(timer);
 changeImg(this.index);
 };

À ce stade, tout le code de notre carrousel est terminé !

Recommandations associées :

Exemple de développement de la fonction de graphique carrousel d'applet WeChat

jquery implémente le code de graphique carrousel côté PC

Deux façons js d'implémenter des images de carrousel

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!