Maison > Article > interface Web > Comment implémenter des images de carrousel coulissant en js ?

Comment implémenter des images de carrousel coulissant en js ?

零下一度original: 2017-07-09 09:40:451457parcourir

Cet article présente principalement en détail l'implémentation js de l'effet carrousel coulissant de gauche à droite. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

L'effet carrousel est Laissez les images glisser automatiquement. toutes les quelques secondes pour obtenir l'effet d'images jouées à tour de rôle. En termes d'effets, les carrousels peuvent être glissants ou progressifs. Le carrousel coulissant est l'effet d'images glissant de gauche à droite. Le carrousel progressif est l'effet d'affichage progressif d'images en fonction de la transparence. la méthode pour obtenir le premier effet.

Principe

Les images de même taille sont combinées dans une colonne, mais une seule des images est affichée et les autres sont masquées. affichage en modifiant l’image de valeur de gauche.

Cliquez pour voir l'effet

partie html

la navigation est le total conteneur, la première One ul list #index est une liste de petits points. Quel que soit le point sur lequel la souris affichera l'image, c'est une classe qui ajoute un attribut de couleur d'arrière-plan aux petits points. une liste de photos.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Carousel Figure</title>
    <link rel="stylesheet" href="style.css" rel="external nofollow" >
  </head>
  <body>
  <!--从左向右滑动-->
    <nav>
      <ul id="index">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul id="img">
        <li><img src="../images/img1.jpg" alt="img1"></li>
        <li><img src="../images/img2.jpg" alt="img2"></li>
        <li><img src="../images/img3.jpg" alt="img3"></li>
        <li><img src="../images/img4.jpg" alt="img4"></li>
        <li><img src="../images/img5.jpg" alt="img5"></li>
      </ul>
    </nav>
  <script src="script.js"></script>
  </body>
  </html>

partie CSS

Les tailles d'image sont toutes de 720*405. Ici, vous devez faire attention. aux points suivants :

la liste ul#img est absolument positionnée par rapport à nav. La longueur de #img doit être réglée sur la largeur totale de toutes les images pour que les images puissent être affichées. côte à côte ;

La largeur de navigation totale du conteneur doit être définie sur la largeur de l'image 720px, c'est-à-dire qu'une seule image peut être affichée et la partie au-delà de la largeur est masquée, c'est-à-dire overflow: Hidden;

La liste des petits points doit être affichée au-dessus de la liste d'images, définissez donc le z-index de #img : -1

La liste des petits points est composée d'un série de li en changeant le style de bordure, il vous suffit donc de changer la couleur d'arrière-plan pour obtenir l'effet de déplacer les petits points.

  *{
    margin:0;
    padding:0;
  }
  nav{
    width: 720px;
    height: 405px;
    margin:20px auto;
    overflow: hidden;
    position: relative;
  }
  #index{
    position: absolute;
    left:320px;
    bottom: 20px;
  
  }
  #index li{
    width:8px;
    height: 8px;
    border: solid 1px gray;
    border-radius: 100%;
    background-color: #eee;
    display: inline-block;
  }
  #img{
    width: 3600px;/*不给宽高无法移动*/
    height: 405px;
    position: absolute;/*不定义absolute，js无法设置left和top*/
    z-index: -1;
  }
  #img li{
    width: 720px;
    height: 405px;
    float: left;
  }
  #index .on{
    background-color: black;
  }

Partie JS

Fonction de déplacement d'image moveElement()

La fonction moveElement doit obtenir la position actuelle et la position cible de l'image et calculer l'écart entre elles pour le mouvement. Vous pouvez utiliser offsetLeft et offsetTop pour obtenir la position actuelle de l'image. . L'effet de "faire glisser" l'image lors d'un déplacement est de diviser la distance en 10 fois pour le mouvement, c'est-à-dire en utilisant la fonction setTimeOut. Cependant, afin d'empêcher la souris de survoler, la fonction clearTimeout() doit être appelée. . Le code est le suivant :

  function moveElement(ele,x_final,y_final,interval){//ele为元素对象
    var x_pos=ele.offsetLeft;
    var y_pos=ele.offsetTop;
    var dist=0;
    if(ele.movement){//防止悬停
      clearTimeout(ele.movement);
    }
    if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
      return;
    }
    dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
    x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
    
    dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
    y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
    
    ele.style.left=x_pos+&#39;px&#39;;
    ele.style.top=y_pos+&#39;px&#39;;
    
    ele.movement=setTimeout(function(){//分10次移动，自调用10次
      moveElement(ele,x_final,y_final,interval);
    },interval)
  }

Fonction de déplacement de petits points moveIndex()

L'essence du déplacement du point est de déplacer le jeu de couleurs d'arrière-plan. Le principe de la classe est de déterminer d'abord quel li a une couleur d'arrière-plan, de le supprimer s'il y en a une, de sorte que tous les li n'aient pas d'arrière-plan, puis d'ajouter un arrière-plan du li actuel.

  function moveIndex(list,num){//移动小圆点
    for(var i=0;i<list.length;i++){
      if(list[i].className==&#39;on&#39;){//清除li的背景样式
        list[i].className=&#39;&#39;;
      }
    }
    list[num].className=&#39;on&#39;;
  }

Carrousel automatique d'images

Écrivez le code suivant directement dans le fenêtre .onload.
Ici, vous devez définir un index variable, ce qui signifie passer à l'image d'index (0 ~ n-1, n est le nombre de li).

  var img=document.getElementById(&#39;img&#39;);
  var list=document.getElementById(&#39;index&#39;).getElementsByTagName(&#39;li&#39;);
  var index=0;//这里定义index是变量，不是属性

  var nextMove=function(){//一直向右移动，最后一个之后返回
    index+=1;
    if(index>=list.length){
      index=0;
    }
    moveIndex(list,index);
    moveElement(img,-720*index,0,20);
  };

La fonction setInterval() est requise pour faire pivoter automatiquement les images, permettant au programme d'appeler automatiquement la fonction nextMove() toutes les quelques secondes :

  var play=function(){
    timer=setInterval(function(){
      nextMove();
    },2500);
  };

La souris recouvre l'effet petit point

Pour réaliser quel petit point la souris recouvre, il suffit de montrer Pour produire l'effet de l'image correspondante, vous devez savoir quel petit point est couvert par la souris. Ici, un index d'attribut personnalisé est ajouté à chaque li afin que la valeur de cet attribut soit le numéro de série du petit correspondant. point i (0~ n-1, n est le nombre de li), de sorte que chaque fois que la souris le couvre, il vous suffit d'obtenir la valeur de l'attribut index pour savoir quel petit point la souris couvre. Notez que l'attribut index n'a rien à voir avec la variable index, ils ont seulement le même nom.

  for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
    list[i].index=i;//这里是设置index属性，和index变量没有任何联系
    list[i].onmouseover= function () {
      var clickIndex=parseInt(this.index);
      moveElement(img,-720*clickIndex,0,20);
      index=clickIndex;
      moveIndex(list,index);
      clearInterval(timer);
    };
    list[i].onmouseout= function () {//移开后继续轮播
      play();
    };
  }

Résumé

Il est séparé du comportement de mouvement des petits points, il est donc plus facile de mettre en œuvre. Cette image de carrousel présente en fait quelques problèmes. Lors du glissement de la dernière image à la première image, la distance de glissement est longue. En fait, il est facile de changer la méthode de glissement. Ici, le calcul final est basé sur -720*. index. La valeur de gauche, et l'index consiste à lier le mouvement de l'image et le mouvement des petits points ensemble. Changez la méthode de glissement en offsetLeft+ actuel (-720). valeur, puis ajoutez une valeur au fichier html. Images :

<li><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
<li><img src="../images/img1.jpg" alt="img1"></li>

Ensuite, en glissant vers la dernière image, attribuez rapidement le décalage à 0 et modifiez-le en. la première image. Les deux images sont les mêmes, les changements ne peuvent pas être distingués et une connexion transparente peut être obtenue.

  if(x_pos==-3600){
    ele.style.left=&#39;0&#39;;
    ele.style.top=&#39;0&#39;;
  }else{
    ele.style.left=x_pos+&#39;px&#39;;
    ele.style.top=y_pos+&#39;px&#39;;
  }

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à l'abréviation de jsArticle suivant：Introduction à l'abréviation de js

Articles Liés

Voir plus