A very good jquery-based slide plug-in with a thumbnail function. For more information, see. At the invitation of a friend, he helped his company make a magic lamp playing effect. The effect is as follows:
In the middle of the thumbnail, the current picture is played, and the two sides are scattered, gradually narrowing down and reducing transparency. Assuming that the video is currently being played to 0th images, the order is as follows:
0
1 4
2 3
The following figure shows the order of the converted graph in a counter-clockwise direction:
4
0 3
1 2
This is only the playback effect of the thumbnail. When the thumbnail is rotated, a corresponding big image is followed by a scroll from right to left, and the speed of entering the big image is corresponding to the thumbnail rotation. The overall effect is as follows:
I want to separate the thumbnail rotation from the larger image rolling. The thumbnail rotation is used as a separate jQuery plug-in, and the events in the plug-in drive the larger image rolling. The following describes the implementation of the thumbnail rotation plug-in:
1. Plug-in parameters:
The Code is as follows:
This. defaults = {
Auto: false, // whether to play automatically
Width: 85, // The width of the thumbnail
Height: 42, // The height of the thumbnail
Onstart: null, // start rolling
Onchange: null // rolling event
};
2. Plug-in events:
The onstart event is triggered every time the rotation starts. The transfer parameters include the jQuery object of the current thumbnail and the jQuery object rotated to the next thumbnail:
The Code is as follows:
Opt. onstart & opt. onstart (me. Images. img [curIdx]. img $, me. Images. img [idx]. img $ );
Onchange event, which is the progress parameter that is triggered every time the distance is rolled, and the current rolling to the percentage:
The Code is as follows:
Opt. onchange & opt. onchange (stepPercent [step]);
The following describes the stepPercent [step] array:
Thumbnail rotation uses the method of timed and variable speed, that is, when the rotation fails, the rotation turns to one or two images, and the time is fixed, however, the speed of rotating two images is faster than that of rotating one image, so that even if there are more images, the rolling distance will not be long before rolling.
StepPercent [step] is designed for this array. Every rotation is fixed to 15 steps, and the rotation distance of each step is gradually reduced, thus achieving a variable speed effect, generate the following array:
The Code is as follows:
Var stepPercent = new Array (15); // fixed the number of 15 steps, each step to a number of percent. Indicates that the speed is not fixed after a certain time
StepPercent [0] = 0.2; // start with 20%
StepPercent [1] = 0.2 + 0.2*0.81; // Step 2
For (var I = 2, total = stepPercent [1]; I <stepPercent. length; I ++ ){
StepPercent [I] = total + (total-stepPercent [I-2]) * 0.81; // initialize the sequence.
Total = stepPercent [I];
If (I = stepPercent. length-1)
StepPercent [I] = 1;
}
The first step is 20%, and then each step is 81% of the previous step, that is, the speed is reduced by 19% each time, but there is an error in decimal calculation. By 15th, it may be very close to 1, but it is not a value of 1. Therefore, set step 1 to 1, that is, 15th, and the scroll ends.
(Note: How was this series designed? I used Excel to find a cell and fill in 0.2. The formula for the next cell is 0.81 of the previous one, and then drag a little more down, add the above value to a value close to 1, that is, the number of required steps .)
If this series does not need to be generated by JS, you can also define an array directly for the series created in Excel. If you want to modify the speed later, just do it again.
During rotation, the size, transparency, position, and other information of the thumbnail are calculated using the proportional factor set in the stepPercent array.
For more information about the plug-in, please download the source code and view it. Next, let's talk about how to scroll through the thumbnail.
3. Large image scrolling
When a large image is rolled along with the thumbnail, but it is rolled to the first few, the effect is always followed by the back of the current big image, to avoid skipping too many images, because the speed is too fast, the onstart event comes in handy.
In the onstart event, first move the current graph to the top of the big image list, and then move the target graph to the back of the current graph. (Note: to move the current graph to the top of the big image list, because it is possible that the next one is in front of the current one, the current one moves to the back, and the scroll bar moves ).
In the onchange event, you only need to set the scroll distance of the horizontal scroll bar based on the input progress parameter. The scrolling of the large image is as simple as that. The specific JS is as follows:
The Code is as follows:
$ (Function (){
$ ("# P_Slide"). Slide ({
Auto: true,
Width: 85,
Height: 42,
Onstart: function (curImg, nextImg ){
Var cData = curImg. attr ("data ");
Var nData = nextImg. attr ("data ");
Var bigCur = $ ("#" + cData), bigNext = $ ("#" + nData );
Var allBigImg = bigCur. parent (). children ("img ");
Var curIndex = allBigImg. index (bigCur [0]);
Var nextIndex = allBigImg. index (bigNext [0]);
Var firstImg = $ (allBigImg [0]);
If (firstImg. attr ("id ")! = BigCur. attr ("id "))
BigCur. insertBefore (firstImg );
$ ("# P_BigImg"). scrollLeft (0 );
BigNext. insertAfter (bigCur );
},
Onchange: function (percent ){
$ ("# P_BigImg"). scrollLeft (1263 * percent );
}
});
Var bigDiv = $ ("# p_BigImg ");
Var bigDivPos = bigDiv. position ();
BigDiv. scrollLeft (0); // At the beginning, the scroll bar is rolled to the header because I found that when the scroll bar is not in the header, press F5 to refresh and the scroll bar will not jump to the header.
$ ("# P_Slide" ).css ({
"Top": (bigDivPos. top + bigDiv. height ()-$ ("# p_Slide"). height () + "px ",
"Left": bigDivPos. left + "px"
});
});
Source code download: http://xiazai.jb51.net/201101/yuanma/SlideDemo_jb51.rar
If you find any problems or improvements during use, please leave a message. Thank you.
