Awesome jquery slideshow plugin with download

At the invitation of a friend, help his company do the jquery thumbnail is in the middle of the current play to the picture, both sides are divergent, gradually narrowing and reduce transparency. Assuming that you are currently playing to the No. 0 picture, the arrangement is as follows:

The thumbnail is in the middle of the currently playing picture, both sides are divergent, gradually narrowing and reducing transparency. Assuming that you are currently playing to the No. 0 picture, the arrangement is as follows:

0

1 4

2 3

The arrangement of the following counterclockwise direction is as follows:

4

0 3

1 2

This is only the effect of the thumbnail, the thumbnail rotation, there is a corresponding large map followed from the right to the left to roll forward, and the speed of the large map into the corresponding thumbnail rotation, the overall effect is as follows:

A slide play effect, the effect is as follows:

I consider the thumbnail rotation and large image of the roll into two parts, the thumbnail rotation as a separate jquery plug-ins, this plug-in in the event-driven large image of the roll. The following is the implementation of the Web plug-in of the thumbnail:

1, the parameters of the plug-in:

 
  
  

  
   
   
This.defaults = {
  
   
   
Auto:false,//whether to play automatically
  
   
   
width:85,//thumbnail width
  
   
   
height:42,//thumbnail height
  
   
   
Onstart:null,//Start scrolling
  
   
   
Onchange:null//scrolling events
  
   
   
};
 
  
  

2, the plug-in event:

The OnStart event, which fires once every time the rotation is started, has the following parameters: The jquery object for the current thumbnail and the jquery object that turns to the next thumbnail image:

 
  
  

  
   
   
Opt.onstart && Opt.onstart
  
   
   
(Me. images.img[curidx].img$, me. images.img[idx].img$);
 
  
  

The onchange event, which is triggered once for each scrolling distance, and how many progress parameters are currently scrolled:

 
  
  

  
   
   
Opt.onchange && Opt.onchange (Steppercent[step]);
 
  
  

The following is going to say Steppercent[step] this array:

The thumbnail rotation adopts the method of timing and indefinite speed, that is, the rotation of a picture or two graphs per rotation, time is fixed, but the speed of the rotation of two graphs faster than the rotation of a diagram, so even if there are more pictures, the distance to scroll farther, it will not take a long time to roll.

Steppercent[step] This array is designed for this, each rotation, are fixed to take 15 steps, each step of the rotation of the distance is gradually narrowing.

 
 

  
  

  
var steppercent = new Array (15);
  
  

  
Fixed 15 steps, each step to the percentage of a number of a series. It means that after a certain time, the speed is not fixed
  
  

  
STEPPERCENT[0] = 0.2; Starting 20%
  
  

  
STEPPERCENT[1] = 0.2 + 0.2 * 0.81; Second Step
  
  

  
for (var i = 2, total = steppercent[1];
  
  

  
i < steppercent.length; i++) {
  
  

  
Steppercent[i] = Total + (total-steppercent[i-2]) * 0.81;
  
  

  
Initializes the sequence.
  
  

  
Total = Steppercent[i];
  
  

  
if (i = = steppercent.length-1)
  
  

  
Steppercent[i] = 1;
  
  

  
}
 
 

Start first step 20%, every step thereafter is 81% of the previous step, that is, the speed of 19%, but the decimal calculation has an error, to the 15th step may be very close to 1, but not 1 of a number, so, the 15th step directly set to 1, that is 100%, scrolling end.

(Note: How this series is designed, I use Excel, to find a cell fill 0.2, the next formula for 0.81 of the previous lattice, and then drag down a little more, and then add the above to close to 1 of the number, is the step count.) )

This series if not JS generation, in fact, you can also create a sequence in Excel directly define an array, later if you want to modify the speed, and then do it once.

When the rotation, the size of the thumbnail, transparency, location and other information calculation, using this steppercent array set a good scaling factor.

About Plug-ins other than to repeat, please download the source code directly to view, below say how the big picture scroll with thumbnails.

3, large picture scrolling

As the thumbnail scrolls, the larger image however, scroll to the first few, the effect is followed by the current big picture behind the roll in, lest skipping too many Zhang, because the speed is too fast, causing a dazzling feeling, so here this onstart event to come in handy.

In the OnStart event, first move the current diagram to the top of the larger chart list, then move the target diagram to the back of the current diagram (note: To move the current diagram to the top of the larger list, because it is possible that the next one is at the front of the current sheet, the current sheet moves back, and the scroll bar position moves).

Then in the OnChange event, as long as the rolling distance of the horizontal scroll bar is set according to the incoming progress parameters, the scrolling of the big picture is so simple. The specific JS 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);
  
  

  
The scroll bar is rolled to the top at first because I found that when the scroll bar is not at the head, press F5 to refresh, and the scroll bar does not jump to the end.
  
  

  

  
  

  
$ ("#div_Slide"). CSS ({
  
  

  
"Top": (Bigdivpos.top + bigdiv.height ()-$ ("#div_Slide"). Height ()) + "px",
  
  

  
"Left": Bigdivpos.left + "px"
  
  

  
});
  
  

  
});
 
 

SOURCE Download: Slidedemo

Original link: http://www.cnblogs.com/homeLu/archive/2011/01/24/1943090.html

"Edit Recommendation"

1. 10 to build the usability of the Web site jquery plug-ins
2. 10 Super Super Practical free jquery image plugin with download
3. JQuery 1.5 First beta release pay download
4. Stunning 10 free jquery albums (with downloads)
5. Show the best 2010 jquery plugin announcement (with download)

"Responsible editor: Chen Yu new TEL: (010) 68476606"