So fügen Sie mit jQuery_jquery neue Funktionen zum Carousel-Plug-in hinzu

Bei diesem Artikel handelt es sich um ein vom Herausgeber geschriebenes Tutorial-Video zum Hinzufügen neuer Funktionen zum Karussell-Plug-in und zum Karussell-Plug-in. Wenn Sie auf andere Websites verweisen, zeigt das Karussell beim Platzieren der Maus auf der unteren Schaltfläche oder beim Anklicken das li mit demselben Index wie die Schaltfläche im ersten Frame an.

Der gesamte Code ist hierhttps://github.com/wwervin72/jQuery-Carousel

Lasst uns beginnen. Als Erstes müssen wir diese Schaltflächen anzeigen. Daher müssen wir dem Prototypobjekt von Carousel eine Methode hinzufügen, um eine Schaltfläche zum Wechseln der Folien zu generieren.

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); 
} 
}, 

Dann müssen wir diese Methode im Carousel-Konstruktor ausführen

this.switchSlideBtn();

Jetzt wurde hier unsere Auswahlschaltfläche hinzugefügt. Was wir jetzt tun müssen, ist, für jede Schaltfläche ein Ereignis hinzuzufügen, wenn die Maus darauf platziert wird.

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

Dann müssen wir auch eine Methode zum Wechseln von Folien zum Prototypobjekt von Carousel hinzufügen, da wir im HTML-Code li verwenden und die Tags a und Img darin einfügen, sodass das folgende Li jedes Element von Carousel ist .

//用切换幻灯片的按钮切换幻灯片的方法
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]);
});
}
},

Ich bin hier hauptsächlich auf zwei Probleme gestoßen:

1. So erhalten Sie den Index jedes Frames im Karussell nach der Bewegung und fügen dann die Attribute des entsprechenden Index zum entsprechenden Frame hinzu.

Hier erstelle ich ein Array mit den Elementen 0-li.length-1 basierend auf der Länge von li und verkette es erneut, wobei ich die darin enthaltenen Elemente verwende, um den Index nach dem Verschieben jedes Frames zu identifizieren, falls dies von Carousel Rotate benötigt wird nach links, das heißt, der Index der Schaltfläche ist größer als der Index des aktuellen ersten Frames. Dann müssen wir die zweite Hälfte dieses Arrays als Index jedes Frames verwenden und nach links verschieben (Button-Index - Die Position des aktuellen ersten Frames ist ein Frame-Index, und das Element dieser Position ist der Index jedes Frames nach der Drehung. Das Gleiche gilt, wenn es nach rechts gedreht wird. Sie müssen jedoch die erste Hälfte des Arrays nacheinander verschieben.

2. Wenn wir mit der Maus schnell auf der Schaltfläche navigieren, treten einige Fehler auf. Dies liegt daran, dass das nächste Ereignis ausgelöst wird, bevor die vorherige Animation abgeschlossen ist.

Dann müssen wir hier ein Flag verwenden, um die Ausführung des Ereignisses einzuschränken, hier das self.rotateFlag. Aber nach vielen Tests habe ich festgestellt, dass die Anweisung mit dem Flag „false“ nicht vor der rotierenden Methode platziert werden kann. Dies wird auch Probleme verursachen, wenn wir sie am Anfang der if-Bedingungsanweisung in der Methode platzieren ist kein Problem.

Okay, jetzt haben wir die Funktionen der Carousel-Erweiterung vorgestellt. Die anderen Teile werde ich nicht vorstellen. Interessierte Freunde können sich an die oben angegebene Adresse wenden, um sie herunterzuladen und anzusehen. Gleichzeitig vielen Dank für Ihre Unterstützung der Script House-Website!