Illustration js image carrousel effect_javascript compétences-js tutoriel-php.cn

Illustration js image carrousel effect_javascript compétences

WBOY

Libérer： 2016-05-16 15:24:38

original

1391 Les gens l'ont consulté

L'exemple de cet article explique le principe de mise en œuvre de l'effet carrousel d'images js et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

Deux solutions d'implémentation de carrousel d'images, regardons d'abord la comparaison des effets :

Option 1 :

Principe : Disposez les images dans une rangée, faites défiler de gauche à droite dans le champ de vision, lors du défilement jusqu'à la dernière image, faites défiler de droite à gauche et revenez à la première image. L'inconvénient est que lors du défilement jusqu'à la dernière image, il y aura un sens inverse, ce qui rendra l'ensemble du processus de défilement incohérent.

Option 2 :

Schéma de principe de mise en œuvre

Principe :

1. Dans le processus carrousel, il y a plusieurs éléments clés : une scène (cadre vert), une zone d'attente (cadre noir), une zone de file d'attente (cadre rouge) et deux tableaux A et B. A est utilisé pour enregistrer les images qui sont affichées et qui le seront ensuite, telles que les images 1 et 2 ; B est utilisé pour enregistrer les images en attente d'apparition, telles que les images 5, 4 et 3.

2. A chaque étape du carrousel, ce qu'il faut faire est la suivante :

Ce que A doit faire est de déplacer son premier élément vers la gauche et de déplacer le deuxième élément vers la gauche dans la zone d'affichage ; puis de déplacer le premier élément juste hors de A et de le coller dans la première position de B.

Ce que B doit faire est de déplacer son dernier élément vers la zone d'attente (c'est-à-dire là où se trouve actuellement la figure 2) et d'attendre, puis de sortir le dernier élément de B et de le pousser vers A. .

Code :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>图片轮播-v2</title>
  <style>

    ul{
      margin: 0;
      padding: 0;
      list-style: none;

    }

    .sliderWrap{
      width: 200px;
      height: 112px;
      overflow: hidden;
      margin: 0 auto;
    }
    .sliderWrap ul{
      position: relative;
      width: 1000px;
      transition: left .5s ease;
      left: 0;
    }
    .sliderWrap li{
      position: relative;
      float: left;
    }
    .sliderWrap ul li img{
      width: 100%;
    }
  </style>
</head>
<body>
<div class="sliderWrap">
  <ul id="slider">
    <li><img src="images/slider/slider1.jpg" alt=""></li>
    <li><img src="images/slider/slider2.jpg" alt=""></li>
    <li><img src="images/slider/slider3.jpg" alt=""></li>
    <li><img src="images/slider/slider4.jpg" alt=""></li>
  </ul>
</div>
<input type="button" value="click me" id="next"/>
<script>
  /**
   * 图片轮播
   * @type {Element}
   */
  var btn = document.getElementById("next");
  var dom = document.getElementById("slider");
  var liArr = dom.getElementsByTagName("li");

  var curWidth = 200;
  var ulWidth = curWidth * liArr.length;
  var show = [];
  var circle = [];

  var goAway = "translate(-" + curWidth +"px, 0) translateZ(0px)";
  var goIn = "translate(0, 0) translateZ(0px)";
  var goPre = "translate(" + curWidth +"px, 0) translateZ(0px)";

  //保证所有li在ul中能在一行内放下
  dom.style.width = ulWidth + "px";

  for(var i = 0, len = liArr.length; i < len; i++){
    var curLi = liArr[i];

    curLi.setAttribute("data-index", i);
    curLi.style.width = curWidth + "px";

    if(i == 0){
      curLi.style.left = 0;
      show.push(curLi);
    }else{
      curLi.style.left = - curWidth * i + "px";
      if(i > 1){
        translate(curLi, goAway, '')
        circle.push(curLi);
      }else{
        show.push(curLi);
        translate(curLi, goPre, '');
      }
    }


  }

  circle.reverse();

  btn.onclick = function(){
    //已展示的图片滚粗
    var showFirst = show.shift();
    translate(showFirst, goAway, "300ms");

    //正在展示的图片
    translate(show[0], goIn, "300ms");
    circle.splice(0, 0, showFirst);

    //准备好下一个将要展示的图片
    var nextPre = circle.pop();
    translate(nextPre, goPre, "0ms");
    show.push(nextPre);

  };

  function translate(dom, goType, time){
    dom.style.transform =
        dom.style.webkitTransform =
            dom.style.mozTransform =
                dom.style.msTransform =
                    dom.style.oTransform = goType;

    dom.style.transitionDuration =
        dom.style.webkitTransitionDuration =
            dom.style.mozTransitionDuration =
                dom.style.msTransitionDuration =
                    dom.oTransitionDuration = time;


  }

</script>
</body>
</html>

Copier après la connexion

Ce qui précède est le principe de mise en œuvre et le code détaillé de l'effet carrousel d'images js. J'espère qu'il sera utile à tout le monde d'apprendre la programmation javascript.