jQuery slideshow plug-in (with thumbnail function)_jquery

At the invitation of a friend, I helped his company create a slide show effect. The effect is as follows:

The middle of the thumbnail is the picture currently being played, and the two sides are divergent, gradually shrinking and reducing transparency. Assuming that the 0th picture is currently being played, the arrangement is as follows: 0

1 4

2 The arrangement after the picture is posted is as follows:

　　４

　　0　３

　１　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　1 　　2

　 This is just the playback effect of the thumbnails. When the thumbnails are rotated, There will be corresponding large pictures that scroll in from right to left, and the speed at which the large pictures enter should correspond to the thumbnail rotation. The overall effect is as follows:


I am considering combining the thumbnail rotation with the scrolling of the large pictures. The thumbnail rotation is divided into two parts. The thumbnail rotation is used as a separate jQuery plug-in, and the events in the plug-in drive the scrolling of the large image. Let’s first talk about the implementation of the thumbnail rotation plug-in:
1. Plug-in parameters:



Copy code

The code is as follows : this.defaults = { auto: false, //Whether to play automatically

width: 85, //The width of the thumbnail

height: 42, //Shrink The height of the thumbnail
onstart: null, //Start scrolling
onchange: null //Scrolling event
};


2. Plug-in events:
onstart event, Triggered once each time the rotation starts. The parameters transferred are: the jQuery object of the current thumbnail and the jQuery object of the next thumbnail:

Copy code

The code is as follows: opt.onstart && opt.onstart(me.Images.img[curIdx].img$, me.Images.img[idx]. img$);

onchange event, which is triggered every time the distance is scrolled, and the progress parameter of the current scrolling percentage:

Copy code

The code is as follows: opt.onchange && opt.onchange(stepPercent[step]);

The following will be Speaking of the stepPercent[step] array:
Thumbnail rotation adopts a timed and variable speed method, that is, each time the rotation does not expire, whether one picture or two pictures are rotated, the time is fixed, but the speed of rotating the two pictures is fixed. It is faster than rotating a picture, so that no matter how many pictures there are, no matter how far the scrolling distance is, it will not take a long time to scroll.
StepPercent[step] This array is designed for this purpose. Each rotation takes 15 steps, and the distance of each rotation gradually decreases, thus achieving a variable speed effect. The array is generated as follows:

Copy code

The code is as follows: var stepPercent = new Array(15); //Fixed Take 15 steps, each step reaching a numerical sequence that represents a percentage. Indicates that the elapsed time is constant and the speed is not fixed stepPercent[0] = 0.2; //Start 20%

stepPercent[1] = 0.2 0.2 * 0.81; //Second step

for (var i = 2, total = stepPercent[1]; 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 each subsequent step is 81% of the previous step, that is, the speed decreases by 19% each time. However, there is an error in the decimal calculation. By the 15th step, it may be very close to 1. But it is not a value of 1, so set step 15 directly to 1, that is, 100%, and the scrolling ends.
(Note: How was this sequence designed? I used Excel to find a cell and fill in 0.2. The formula in the next cell is 0.81 in the previous cell. Then drag down a little more, and then put the above Accumulating to a value close to 1 is the required number of steps. )
If this sequence is not generated using JS, you can actually define an array directly from the sequence created in Excel. If you want to modify the speed in the future, do the same. Just once.
　
When rotating, the size, transparency, position and other information of the thumbnail are calculated using the scale factor set by this stepPercent array.
I won’t go into details about the plug-in. Please download the source code directly to view. Let’s talk about how to scroll the big picture according to the thumbnail.
3. Large picture scrolling
When the large picture scrolls with the thumbnails, no matter which picture it is scrolled to, the effect shown is to scroll immediately behind the current large picture to prevent skipping too much. When there are multiple pictures, the speed is too fast, causing a dazzling feeling, so the onstart event comes in handy here.
In the onstart event, first move the current picture to the first place in the large picture list, and then move the target picture to the back of the current picture. (Note: The current picture is moved to the first place in the large picture list because it is possible to move the current picture to the first place in the large picture list. The picture is in front of the current picture. If the current picture is moved to the back, the scroll bar position will move).
Then in the onchange event, just set the scrolling distance of the horizontal scroll bar according to the incoming progress parameter. The scrolling of the large image is that simple. The specific JS is as follows:

Copy code The code is as follows:

$(function() {
$("#div_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);
$("#div_BigImg").scrollLeft(0);
bigNext.insertAfter(bigCur);
},
onchange: function(percent) {
$("#div_BigImg"). scrollLeft(1263 * percent);
}
});
var bigDiv = $("#div_BigImg");
var bigDivPos = bigDiv.position();
bigDiv.scrollLeft( 0); //Initially scroll the scroll bar to the head because I found that when the scroll bar is not at the head, pressing F5 to refresh will not jump to the head.
$("#div_Slide").css({
"top": (bigDivPos.top bigDiv.height() - $("#div_Slide").height()) "px",
"left": bigDivPos.left "px"
}) ;
});

Source code download: http://xiazai.jb51.net/201101/yuanma/SlideDemo_jb51.rar
Found something during use If you have any questions or areas for improvement, please leave a message, thank you.