How does jQuery add new functions to the Carousel plug-in?

This article introduces how to add new functions to the Carousel plug-in, which is very convenient for future program development and has reference value, if you are interested, learn it together. This article is a tutorial video about the carousel plug-in, which is a new function added to the Carousel plug-in. Refer to other websites. When you place the cursor over the lower button or click it, Carousel will use the same icon as this button to display the li as the first frame.

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

In this case, the first thing we need to do is to display these buttons. Therefore, we need to add a method on the prototype of Carousel to generate a button for switching slides.

SwitchSlideBtn: function () {var slideNum = this. posterItems. size (); // get the total number of frames of the current usel object var str = ''; var firstBtnLeft = (this. setting. width-(slideNum-1) * 15-slideNum * 15)/2; // specifies the position where the first button is placed (var I = 0; I
 
  

  
Then we need to run this method in the Carousel constructor.

  
This. switchSlideBtn ();

  
Now, we have added the selection button. Now, you need to add a mouse-over event for each button.

  

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

  
Then, we also need to add a method for switching slides to the prototype object of Carousel, because the li we use in the HTML code then contains the and Img labels, therefore, the following Li is the frame of Carousel.

  

  
// SwitchSlide: function (btn) {var self = this; var BtnIndex =$ (btn ). index (); // obtain the current button execution event $ ('# selBtn .btn'hangzhou.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 = bytes ('z-I Ndex ') = level) {// obtain the subscript index = I ;}} of the first frame currently displayed; var nextTime = BtnIndex-index; // rotate nextTime times var arr = [], zIndexArr = []; for (var I = 0; I <posterItemsLength; I ++) {arr. push (I);} arr = arr. concat (arr); // Add an array to simulate the left rotation of Li subscript if (nextTime> 0) {// prev, move the second half of the array forward the nextTime subscript self. rotateFlag = false; // note here self. the rotateFlag ID is put in it for modification. This. posterItems. each (function (I, item) {var posterItemIndex = arr. lastIndexOf (I); // obtain the subscript var tag of the li node in arr = $ (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; // values ('zindex', zIndexArr [I]); // put forward this z-index to change it separately to make the change of the z-index attribute run first without animation});} if (nextTime <0) {// right rotation of next, move the first half of the array backward to the absolute value of nextTime subscript self. rotateFlag = false; this. posterItems. each (function (I, item) {var posterItemIndex = arr. indexOf (I), // obtain the subscript tag of the li node in arr = $ (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; optional parameter self.posteritems.each(function( I ?#(this=.css ('zindex', zIndexArr [I]) ;}},
  

  
There are two main problems:

  
1. How to obtain the subscript of each frame in Carousel after moving, and then add the attribute of the corresponding lower mark to the corresponding frame.

  
Here, based on the length of li, I will create an array with an element of 0-li.length-1, and then concat itself, and use the elements in it to identify the subscript after each frame is moved, if Carousel needs to 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 take the half part of the array as the subscript of each frame, and move to the left (Button subscript-the current first frame subscript) position, then the element of this position is the subscript of each frame after rotation. It is similar to rotating to the right. However, we need to move the first half of the array.

  
2. When we move the mouse over the button quickly, some bugs will occur, because the last animation has not been executed yet, And the next event is triggered again.

  
Here we need to use an identifier to restrict the execution of the event, that is, self. rotateFlag. However, after many tests, I found that the statement with the flag assigned as false cannot be placed before the rotation method, which also causes problems, when we place it at the beginning of the if Condition Statement in the method, there is basically no problem.

  
Now, the extended functions of Carousel are introduced. Other parts will not be introduced. If you are interested, you can go to the address I provided above to download and check it out. At the same time, I would like to thank you for your support for the website!