How JQuery adds new functionality to the Carousel plug-in _jquery

This article is a small series to write their own to add new features to the Carousel plug-in, about the Carousel plug-in instructional video. Refer to other websites, when the mouse is placed on the bottom button or after the click, Carousel will be the same button with the same subscript Li as the first frame display.

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

Then do it, first of all we have to do is to show these buttons. So we need to add a method on the Carousel prototype object prototype to generate a button to toggle the slide.

Switchslidebtn:function () {
var slidenum = this.posterItems.size ();//Get the current total number of frames for this Carousel object
var str = '; 
var firstbtnleft = (this.setting.width-(slideNum-1) *15-slidenum*15)/2; Specify the position for the first button to be placed for
(var i = 0; i<slidenum; i++) {
str = ' <button class= ' btn ' ></button> '; Add each BTN code to the STR string and add it to selbtn one at a time to avoid modifying Dom
}
$ (' #selBtn ') multiple times. html (str); 
for (var i = 0;i<slidenum; i++) {
$ (' #selBtn. btn '). EQ (i)-css (' left ', firstbtnleft+i*30); 
} 

And then we need to run this method inside the carousel constructor.

THIS.SWITCHSLIDEBTN ();

So here, our selection button has been added. Now all you have to do is add a mouse to each of these buttons to put up the event.

$ (' #selBtn. btn '). each (the function () {
$ (this). Hover (function () {
if (self.rotateflag) {
self.switchslide ( this);
}
},function () {
});
}

Then we also need to add a toggle slide to Carousel's prototype object, because in the HTML code we use the Li and then put the A, IMG tag, so the following li is each frame of carousel.

How to toggle slides with the Toggle Slide button switchslide:function (btn) {var self = this; var Btnindex = $ (BTN). index ();//Get the current button execution event $ (' #sel
Btn. 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) {//Get the subscript index = i;}) of the first frame currently displayed; var nexttime = Btnindex-index;
Rotate left nexttime times var arr = [],zindexarr=[]; 
for (var i = 0;i < posteritemslength;i++) {Arr.push (i); } arr = Arr.concat (arr); Adds an array to simulate Li's subscript if (Nexttime > 0) {//prev left rotation, moving the latter part of the array forward nexttime subscript Self.rotateflag = false;
Notice here Self.rotateflag This logo is placed inside to modify. This.posterItems.each (function (i, item) {var Posteritemindex = Arr.lastindexof (i);//Get the subscript var tag = $ for 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;//After the animation of each frame has been executed, Self.rotateflag is changed to True to perform the next animation});
}); Self.posterItems.each (function (i) {$ (this). CSS (' ZIndex ', zindexarr[i])//Bring this z-index to be changed individually in order to make the change of Z-index this attribute first executed
, and does not need to be animated}); if (Nexttime < 0) {//next Right rotation, move the first half of the array backward nexttime the absolute value of subscript Self.rotateflag = false; This.posterItems.each (function (i , item) {var Posteritemindex = Arr.indexof (i),//Get the subscript tag = $ for 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;
});
});
Self.posterItems.each (function (i) {$ (this). CSS (' ZIndex ', zindexarr[i]); }
},

There are two main problems encountered here:

1, how to get each frame in the carousel after the move subscript, and then the corresponding subscript properties, add to the corresponding frame.

I'm here based on the length of Li, To create an array with an element of 0-li.length-1, and then concat itself once, with the elements inside to identify each frame after the moving subscript, if it is carousel need to rotate to the left, that is, the button's subscript is larger than the current first frame subscript, then we need to the second half of the array as the lower part of each frame And move to the left (button subscript-the current first frame subscript) position, and then the element of this position is the subscript after the rotation of each frame. It is similar if you rotate to the right. But you need to move the first half of the array.

2, when we use the mouse button on the rapid movement of the time will appear some bugs, this is because the previous animation has not been completed, the next event was triggered.

So here we need to use an identifier to limit the execution of the event, which is the self.rotateflag here. But after a number of tests, I found out that the statement that the ID was assigned to false cannot be placed in front of the rotated method, so there is a problem, and when we place it in the beginning of the IF condition statement in the method, it is basically OK.

All right, here we are. The carousel extended function is finished. Other parts do not introduce, interested friends can go above I give the address download down to see. At the same time, thank you very much for your support of cloud-dwelling community website!