Comment ajouter de nouvelles fonctions au plug-in Carousel avec jQuery_jquery

Cet article est un tutoriel vidéo écrit par l'éditeur pour ajouter de nouvelles fonctions au plug-in carrousel et sur le plug-in Carousel. En référence à d'autres sites Web, lorsque la souris est placée sur le bouton inférieur ou cliquée, le carrousel affichera le li avec le même indice que le bouton dans la première image.

Tout le code est icihttps://github.com/wwervin72/jQuery-Carousel

Commençons. La première chose que nous devons faire est d’afficher ces boutons. Nous devons donc ajouter une méthode au prototype d'objet prototype de Carousel pour générer un bouton permettant de changer de diapositive.

switchSlideBtn : function(){
var slideNum = this.posterItems.size(); //获得当前的这个carousel对象的总共的帧数
var str = ''; 
var firstBtnLeft = (this.setting.width-(slideNum-1)*15-slideNum*15)/2; //规定第一个按钮放的位置
for(var i = 0; i<slideNum; i++){
str += '<button class="btn"></button>'; //把每一个btn的代码添加到str字符串中，然后一次性添加到selBtn这里面，避免多次修改DOM
}
$('#selBtn').html(str); 
for(var i = 0;i<slideNum; i++){
$('#selBtn .btn').eq(i).css('left' , firstBtnLeft+i*30); 
} 
}, 

Ensuite, nous devons exécuter cette méthode dans le constructeur Carousel

this.switchSlideBtn();

Maintenant ici, notre bouton de sélection a été ajouté. Ce que nous devons faire maintenant, c'est ajouter un événement pour chaque bouton lorsque la souris est placée dessus.

$('#selBtn .btn').each(function(){
$(this).hover(function(){
if(self.rotateFlag){
self.switchSlide(this);
}
},function(){
});
})

Ensuite, nous devons également ajouter une méthode pour basculer les diapositives vers l'objet prototype de Carousel, car dans le code HTML, nous utilisons li et y mettons les balises a et Img, donc le Li suivant est chaque élément du cadre Carousel. .

//用切换幻灯片的按钮切换幻灯片的方法
switchSlide : function(btn){
var self = this;
var BtnIndex = $(btn).index(); //获得当前是哪一个按钮执行事件
$('#selBtn .btn').css('background','rgba(255,255,255,.3)');
$('#selBtn .btn').eq(BtnIndex).css('background','rgba(255,255,255,1)');
var level = Math.floor(this.posterItems.size()/2),
posterItemsLength = this.posterItems.size(),
index;
$('.poster-item').filter(function(i,item){
if($(this).css('z-index') == level){ //获得当前显示的第一帧的下标
index = i;
}
});
var nextTime = BtnIndex-index; //向左旋转nextTime次
var arr = [],zIndexArr=[];
for(var i = 0;i < posterItemsLength;i++){ 
arr.push(i); 
}
arr = arr.concat(arr); //添加一个数组，用来模拟Li的下标
if(nextTime > 0){ //prev 左旋转,把数组的后半部分向前移动nextTime个下标
self.rotateFlag = false; //注意这里吧self.rotateFlag这个标识放在里面来修改了。
this.posterItems.each(function(i, item){
var posterItemIndex = arr.lastIndexOf(i); //获得li节点在arr中对应的下标
var tag = $(self.posterItems[arr[posterItemIndex-nextTime]]),
width = tag.width(),
height = tag.height(),
zIndex = tag.css('zIndex'),
opacity = tag.css('opacity'),
left = tag.css('left'),
top = tag.css('top');
zIndexArr.push(zIndex);
$(item).animate({
width : width,
height : height,
opacity : opacity,
left : left,
top : top
},self.setting.speed,function(){
self.rotateFlag = true; //在每一个帧的动画都执行完毕之后，self.rotateFlag改为true，才能执行下一次动画
});
});
self.posterItems.each(function(i){
$(this).css('zIndex',zIndexArr[i]); //把这个z-index提出来单独改变是为了让z-index这个属性的改变最先执行，并且不需要动画
});
}
if(nextTime < 0){ //next 右旋转,把数组的前半部分向后移动nextTime的绝对值个下标
self.rotateFlag = false;
this.posterItems.each(function(i, item){
var posterItemIndex = arr.indexOf(i), //获得li节点在arr中对应的下标
tag = $(self.posterItems[arr[posterItemIndex+Math.abs(nextTime)]]),
width = tag.width(),
height = tag.height(),
zIndex = tag.css('zIndex'),
opacity = tag.css('opacity'),
left = tag.css('left'),
top = tag.css('top');
zIndexArr.push(zIndex);
$(item).animate({
width : width,
height : height,
opacity : opacity,
left : left,
top : top
},self.setting.speed,function(){
self.rotateFlag = true; 
});
});
self.posterItems.each(function(i){
$(this).css('zIndex',zIndexArr[i]);
});
}
},

J'ai principalement rencontré deux problèmes ici :

1. Comment obtenir l'indice de chaque image dans Carousel après le mouvement, puis ajouter les attributs de l'indice correspondant à l'image correspondante.

Ici, je crée un tableau avec les éléments 0-li.length-1 en fonction de la longueur de li, et je me concaténe à nouveau, en utilisant les éléments à l'intérieur pour identifier l'indice après le déplacement de chaque image, si cela est nécessaire par la rotation du carrousel. vers la gauche, c'est-à-dire que l'indice du bouton est supérieur à l'indice de la première image actuelle, nous devons alors utiliser la seconde moitié de ce tableau comme indice de chaque image et nous déplacer vers la gauche (indice du bouton - la position actuelle de la première image (A frame index), puis l'élément de cette position est l'index de chaque image après rotation. La même chose est vraie s'il est tourné vers la droite. Cependant, vous devez déplacer la première moitié du tableau l’une après l’autre.

2. Lorsque nous utilisons la souris pour nous déplacer rapidement sur le bouton, certains bugs apparaîtront car l'événement suivant est déclenché avant la fin de l'animation précédente.

Ensuite, nous devons ici utiliser un indicateur pour limiter l'exécution de l'événement, qui est ici le self.rotateFlag. Mais après de nombreux tests, j'ai découvert que l'instruction avec l'indicateur attribué à false ne peut pas être placée devant la méthode de rotation. Cela posera également des problèmes lorsque nous la placerons au début de l'instruction conditionnelle if dans la méthode. il n'y a pas de problème.

D'accord, nous avons maintenant introduit les fonctions de l'extension Carousel. Je ne présenterai pas les autres parties. Les amis intéressés peuvent se rendre à l'adresse que j'ai indiquée ci-dessus pour télécharger et jeter un œil. Par la même occasion, merci beaucoup pour votre soutien au site Script House !