Native JS implémente un plug-in de carrousel d'images de style carrousel

J'ai moi-même écrit trois carrousels d'images, l'un est implémenté avec du JS natif simple sans aucun effet d'animation, et l'autre est implémenté avec JQuery et bascule entre les fondus d'entrée et de sortie. Maintenant, je veux en créer un plus cool et le mettre sur mon blog ou mon site Web personnel afin de pouvoir présenter mon travail. J'ai parcouru le site Web du MOOC et trouvé un cours de plug-in carrousel jquery, ce qui était un peu cool, alors j'ai pensé à l'encapsuler avec du JS natif. Ce n’est que lorsque j’ai commencé à le faire que j’ai réalisé que ce n’était pas aussi facile que je le pensais. . . Sans plus tarder, expliquons le processus de mise en œuvre.

2. Effet

Parce que mon serveur n'est pas encore terminé. Il n'y a pas de démonstration en ligne (ORZ...), je ne peux donc mettre qu'un rendu.

Vous pouvez toujours voir l'effet approximatif sur la photo, donc je n'en dirai pas plus. Si vous voulez voir le véritable effet du code, vous pouvez télécharger le code sur mon github N'oubliez pas de donner une étoile à mon projet github ^_^

3. 🎜>

structure HTML

<div class="carrousel-main" data-setting=&#39;{"width":1000,"height":400,
 "carrouselWidth":750,
 "carrouselHeight":400,
 "scale":0.9,
 "verticalAlign":"middle"}&#39;>
 <div class="carrousel-btn carrousel-btn-pre"></div>
 <ul class="carrousel-list">
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="Native JS implémente un plug-in de carrousel d'images de style carrousel" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="Native JS implémente un plug-in de carrousel d'images de style carrousel" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghw/default1.png"  data-src="img/3.jpg"  class="lazy"   alt="Native JS implémente un plug-in de carrousel d'images de style carrousel" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghw/default1.png"  data-src="img/4.jpg"  class="lazy"   alt="Native JS implémente un plug-in de carrousel d'images de style carrousel" ></a>
  </li>
  <li class="carrousel-item">
  <a href="#"><img  src="/static/imghw/default1.png"  data-src="img/5.jpg"  class="lazy"   alt="Native JS implémente un plug-in de carrousel d'images de style carrousel" ></a>
 </ul>
 <div class="carrousel-btn carrousel-btn-next"></div>
 </div>

Cette structure est la même que la structure générale du code HTML du carrousel. La légère différence est que le div principal du carrousel a un attribut de définition de données. dessus. Parmi les propriétés se trouvent certains paramètres de l'effet carrousel. La signification spécifique des paramètres sera expliquée plus tard.

Je ne publierai pas le code pour la partie css. Le plus important est de faire attention au positionnement absolu des éléments. Comme vous pouvez le voir sur les rendus, la position et la taille de chaque image sont. différents, donc ceux-ci sont contrôlés via js , donc un positionnement absolu est requis. Ce qui suit se concentre sur le processus d’implémentation de js.

Processus de mise en œuvre de JS

Parlons de quelques étapes clés de JS Après avoir terminé ces étapes, il ne devrait y avoir aucune difficulté.

①Paramètres par défaut

Comme il s'agit d'un plug-in de package, il y aura certainement des valeurs par défaut des paramètres qui doivent être configuré. Dans ce plug-in, les principaux paramètres sont les suivants :

width:1000, //La largeur de la zone de slide
height:400, //La hauteur de la zone de slide
carrouselWidth:700, //La première diapositive Largeur du cadre
carrouselHeight:400, //Hauteur du premier cadre de la diapositive
échelle:0,9,//Enregistrez la relation de proportion d'affichage, par exemple, de combien la largeur et la hauteur de la deuxième image est comparée à la première image.
autoPlay:true,//Si la lecture est automatique
timeSpan:3000,//Intervalle de temps de lecture automatique
verticalAlign:'middle' //Alignement de l'image, là. Il existe trois manières : topmiddlebottom, la valeur par défaut est middle

②Objet d'encapsulation

Parce qu'un site Web peut utiliser le même plug-in carrousel à plusieurs endroits , l'encapsulation est essentielle. Après avoir défini cet objet, si vous définissez une méthode d'initialisation pour l'objet, vous pouvez créer plusieurs objets. Il vous suffit de transmettre le DOM de la même classe pour toutes les classes. Donc, ma méthode d'initialisation est la suivante :

Carousel.init=function(carrousels){
 var _this=this;
 //将nodeList转换为数组
 var cals= toArray(carrousels); <br> /*因为原生JS获取所有的类，得到的是一个nodeList，是一个类数组,如果想要使用数组的方法则需要转化为真正的数组。这里toArray为转化方法。*/
 cals.forEach(function(item,index,array){
 new _this(item);
 });
 }

Dans ce cas, lorsque je suis dans window.onload, j'appelle Carrousel.init(document.querySelectorAll('.carrousel-main') ); comme ça Vous pouvez créer plusieurs carrousels !

③Initialiser les paramètres de position de la première image

Parce que les paramètres pertinents de toutes les images après la première image se réfèrent à la première image C'est défini par des images, il est donc essentiel de bien définir la première image.

setValue:function(){
this.carrousel.style.width=this.Settings.width+'px';
this.carrousel.style.height=this.Settings.height+'px';
 /*左右按钮设置,这里要让左右按钮平均地瓜分轮播区域宽减去第一帧宽度之后的区域,z-index要比除第一帧外所有图片都高，而图片刚好左右分放置，因此z-index的值就是图片数量的一半。*/
 var btnW=(this.Settings.width-this.Settings.carrouselWidth)/2;
 this.preBtn.style.width=btnW+'px';
 this.preBtn.style.height=this.Settings.height+'px';
 this.preBtn.style.zIndex=Math.ceil(this.carrouselItems.length/2);
 
 this.nextBtn.style.width=btnW+'px';
 this.nextBtn.style.height=this.Settings.height+'px';
 this.nextBtn.style.zIndex=Math.ceil(this.carrouselItems.length/2);
 //第一帧相关设置
 this.carrouselFir.style.left=btnW+'px';
 this.carrouselFir.style.top=this.setCarrouselAlign(this.Settings.carrouselHeight)+'px';
 this.carrouselFir.style.width=this.Settings.carrouselWidth+'px';
 this.carrouselFir.style.height=this.Settings.carrouselHeight+'px';
 this.carrouselFir.style.zIndex=Math.floor(this.carrouselItems.length/2);
},

Ici, lorsqu'il s'agit du nouvel objet, accédez au nœud dom pour obtenir les paramètres de définition des données, puis mettez à jour la configuration des paramètres par défaut. Il y a quelque chose à noter ici. L'obtention des paramètres DOM ne peut pas mettre à jour directement les paramètres par défaut en attribuant des valeurs, car lorsque l'utilisateur configure les paramètres, tous les paramètres peuvent ne pas être configurés une seule fois. Si les valeurs sont attribuées directement et que l'utilisateur ne configure pas tous les paramètres, les paramètres seront perdus. Ici, j'ai écrit une méthode d'extension d'objet similaire à la méthode $.extend dans JQuery pour mettre à jour les paramètres. Je ne les listerai pas spécifiquement, mais ceux qui sont intéressés peuvent les télécharger.

④Autres paramètres de position de l'image

Les images ici divisent en fait les images sauf la première uniformément à gauche et à droite Deux, et le la position de l'image à gauche est différente de celle de droite, elles doivent donc être configurées séparément :

//设置右边图片的位置关系
var rightIndex=level;
rightSlice.forEach(function(item,index,array){
 rightIndex--;
 var i=index;
 rw=rw*carrouselSelf.Settings.scale;//右边的图片是按照scale比例逐渐变小的
 rh=rh*carrouselSelf.Settings.scale;
 
 item.style.zIndex=rightIndex;//越往右边z-index的值越小，可以用图片数量的一般逐渐递减
 item.style.width=rw+'px';
 item.style.height=rh+'px';
 item.style.opacity=1/(++i);//越往右边透明度越小<br>  //这里的gap计算方法为：轮播区域减去第一帧宽度，除2，再除左边或者右边的图片张数
 item.style.left=(constOffset+(++index)*gap-rw)+&#39;px&#39;;//left的值实际上就是第一帧的left+第一帧的宽度+item的间距减去item的宽度
 item.style.top=carrouselSelf.setCarrouselAlign(rh)+&#39;px&#39;;
});

La méthode de réglage à gauche est similaire et plus simple, donc je n'irai pas dans les détails.

⑤ Ajustez la position et la taille de toutes les images pendant la rotation

Cliquez sur le bouton à droite pour faire pivoter la. image suivante à gauche. Cliquez sur le bouton à gauche pour faire pivoter vers la droite. À ce stade, il nous suffit de visualiser toutes les images sous forme d'anneau, de cliquer une fois, de changer la position une fois et de terminer la rotation. Plus précisément, lors d'une rotation vers la gauche, rendez les paramètres de la deuxième image égaux à la première image, la troisième image égale à la deuxième image... et la dernière image égale à la première image. Lors d'une rotation vers la droite, rendez les paramètres de la première image égaux à la deuxième image, les paramètres de la deuxième image égaux à la troisième image... et les paramètres de la dernière image égaux à la première image.

这里就说说左旋转吧

if(dir=='left'){
 toArray(this.carrouselItems).forEach(function(item,index,array){
 var pre;
 if(index==0){//判断是否为第一张
  pre=_this.carrouselLat;//让第一张的pre等于最后一张
  var width=pre.offsetWidth; //获取相应参数
  var height=pre.offsetHeight;
  var zIndex=pre.style.zIndex;
  var opa=pre.style.opacity;
  var top=pre.style.top;
  var left=pre.style.left;
 }else{
  var width = tempWidth;
  var height = tempHeight;
  var zIndex = tempZIndex;
  var opa = tempOpacity;
  var top = tempTop;
  var left = tempLeft;
 }
  //这里需要注意，因为第二张图片是参照第一张的，而这样改变的时候，第一张是首先被改变的，因此必须先把第一张的相关参数临时保存起来。
 tempWidth = item.offsetWidth;
 tempHeight = item.offsetHeight;
 tempZIndex = item.style.zIndex;
 tempOpacity = item.style.opacity;
 tempTop = item.style.top;
 tempLeft = item.style.left;
 
 item.style.width=width+'px';
 item.style.height=height+'px';
 item.style.zIndex=zIndex;
 item.style.opacity=opa;
 item.style.top=top;
  // item.style.left=left;
  animate(item,'left',left,function(){//自定义的原生js动画函数
  _this.rotateFlag=true;
  });
 });
}

这里的旋转，如果不使用一些动画过度，会显得很生硬。但是原生JS并没有动画函数，这里我是自己写了一个模仿的动画函数。其原理就是获取dom原来的样式值，与新传入的值比较。用一些方法定义一个速度。我这里的速度就是用其差值除18.然定义一个计时器，参考了一下jquery源码里面的时间间隔为每13毫秒执行一次。然后才原来的样式值每次加上speed后等于传入的值的时候清楚计时器即可。具体可以看这里。

好啦，关键的地方都差不多啦，如果明白这些过程应该就很容易了！

四、总结思考

总结：

个人感觉这还是一个比较好理解的插件。如果能结合JQuery来做就相当简单了。但是用原生来写的话，还是有一些不那么流畅的感觉。应该是自定义动画比不上JQuery封装好的动画吧。

还有，这个插件因为图片需要平均分到左右两边，于是对于偶数数量的图片来说，这里用的方法是克隆第一张，然后加到最后，形成一个奇数。

思考：

如果说有bug的话，那就是我定义了一个rotateFlag的标志去判断当前能否旋转，就是预防快速点击的时候跟不上。我在按下的时候把rotateFlag设置为false，然后在动画结束后再把rotateFlag设置为true，但是好像作用并不明显，希望有关大神可以指教一下，大家共同进步。

更多编程相关知识，请访问：编程入门！！