How to add new functions to the Carousel plug-in with jQuery_jquery

This article is a tutorial video written by the editor to add new functions to the carousel plug-in and about the Carousel plug-in. Referring to other websites, when the mouse is placed on the lower button or clicked, the Carousel will display the li with the same subscript as the button as the first frame.

All the code is herehttps://github.com/wwervin72/jQuery-Carousel

Let’s get started. The first thing we need to do is to display these buttons. So we need to add a method to Carousel's prototype object to generate a button for switching slides.

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

Then we need to run this method in the Carousel constructor

this.switchSlideBtn();

Now here, our selection button has been added. What we need to do now is to add an event for each button when the mouse is placed on it.

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

Then we also need to add a method to switch slides to the prototype object of Carousel, because in the HTML code we use li and put the a and Img tags in it, so the following Li is each element of Carousel. frame.

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

I mainly encountered two problems here:

1. How to obtain the subscript of each frame in Carousel after movement, and then add the attributes of the corresponding subscript to the corresponding frame.

Here I create an array with elements 0-li.length-1 based on the length of li, and concat itself again, using the elements inside to identify the subscript after each frame is moved, if it is needed by Carousel Rotate to the left, that is, the subscript of the button is greater than the subscript of the current first frame, then we need to use the second half of this array as the subscript of each frame, and move to the left (button subscript - the current first frame A frame index) position, and then the element of this position is the index of each frame after rotation. The same is true if it is rotated to the right. But you need to move the first half of the array one after another.

2. When we use the mouse to move quickly on the button, some bugs will appear. This is because the next event is triggered before the previous animation is completed.

Then here we need to use a flag to limit the execution of the event, which is the self.rotateFlag here. But after many tests, I found that the statement with the flag assigned to false cannot be placed in front of the rotating method. This will also cause problems. When we place it at the beginning of the if conditional statement in the method, Basically there is no problem.

Okay, now we have introduced the functions of Carousel extension. I won’t introduce the other parts. Interested friends can go to the address I gave above to download and have a look. At the same time, thank you very much for your support of the Script House website!