jquery Implements 3D Slideshow

First look at the following:

See this cool effect there is no very envious ah! Then let's learn to implement it.

1, see the effect after we first analyze how this DOM to achieve!

First we have to wrap the content in a large container, and then the image that looks like a 3d effect is actually achieved by our visual error. He achieves this by changing the size, transparency, and zindex of the image. Do you have any ideas about the principle?

Let's take a look at how it should be done with jquery.

The first step is to implement this visual effect first

The first is to process each picture first, we use Li to place each picture, but the picture is divided into three parts, respectively, the left picture, the right picture, and the middle picture. We first realize the middle of the picture, he is in the whole container of the right center, only need to position a bit to set the next position on the line, then the right and left of the picture is equal to the reduction, transparency in turn, we also need to position positioning, and then the corresponding height, width, ZIndex, Opcity, left, top give it value.

The second part realizes the logic of left and right rotation

In jquery there are prev and next two methods, they can get the previous jquery object and the latter jquery object, when we click on the left button, each Li to get his previous Li style, If his previous li is empty then get the last Li style and animate it. So that every click gets his previous style we can make the whole carousel move! Click the logic of the right button.

Third bound event

The event is bound to two buttons respectively, if the left button will pass in the ' leave ' parameter, the right side is passed to the ' OK ' parameter, and the animation function can be called.

2, Write code!

Once we've sorted out the ideas, we can start writing the code, first of all let's implement the HTML page!

Here is the HTML code:

<divclass="content"> <divclass="box_1"> <divclass="left_btn"></div> <ulclass="ull"> <li id="Lifirst">"Images/01.jpeg"></li> <li>"Images/02.jpeg"></li> <li>"Images/03.jpeg"></li> <li>"Images/04.jpeg"></li> <li>"Images/05.jpeg"></li> <li>"Images/06.jpeg"></li> <li id="Lilast">"Images/07.jpeg"></li> </ul> <divclass="right_btn"></div> </div> </div>

Here is the CSS code:

. content{margin:150px Auto; Max-width:1000px; Font-size:0px;        }. box_1{width:1000px;        height:270px;      position:relative;        }. left_btn{Position:absolute;        height:270px;        width:180px; Z-index:Ten; Left:0; Top:0; Background:url (http://112.74.131.10/tiduihulian/u7/3dslide/images/btn_l.png) No-repeat Center Center;}. right_btn{height:270px;        width:180px; Z-index:Ten;        Position:absolute; Right:0; Top:0; Background:url (http://112.74.131.10/tiduihulian/u7/3dslide/images/btn_r.png) No-repeat Center Center;}. box_1 ul{width:1000px;        height:270px;      position:relative;        }. box_1 ul li{Position:absolute; Left:0; Top:0;        }. box_1 ul li img{display:block; Width: -%; Height: -%; }

Here is:

You can see all the Li stacks together, and here we start initializing all of the Li positions.

The introduction of jquery first defines the next data to be used below is the JS code

var setting = {      "posterwidth": 640,  //The width of the first frame of      the slide "posterheight": 270,//The height of the first frame of the slide      "scale": 0.8,      // Records show proportional relation      "speed": $,      }      var lifirst=$ (' #lifirst '),//First Li          lilast=$ (' #lilast '),//Last Li          all =$ ('. ull li '),//All Li          prev,//          Next,          ali=all.slice (1),//go out first frame of Li          
          LF = 180/num,//li each left shift value            Rightli=ali.slice (0,num),//minus the first half of Li's          leftli=ali.slice (num),//The second half of li          rw = Setting.posterwidth,          RH =setting.posterheight;     

This declares that an object setting parameters determine the aspect and scale of the first frame of the carousel and the animation time, and you can modify the size of the carousel by changing this parameter.

The location code to initialize the first frame is as follows:

Lifirst.css ({         width:rw,         Height:rh, left         : (1000-RW)/2,           opcicty:1,         top: (270-RH)/2,         Zindex:num      })

The

Location code for all remaining frames is as follows:

 function Defau () {///Right Basic attribute Rightli.each (function (i) {var j=1;           num--;           RW = Rw*setting.scale;                      RH = Rh*setting.scale;              $ (this). css ({zindex:num, WIDTH:RW, Height:rh, opacity:1/(++J), Left:(1000-180) + (++i) *LF-RW,//1000 is the width of the window, 180 is the width of a button, subtraction plus i*lf for the current window to the right of the current frame distance,//minus              The width of the current frame is the distance from the left shift of the current frame.        Top: (270-RH)/2});            }) var LW = Rightli.last (). Width (), LH = Rightli.last (). Height (), oloop=4;              The left base property Leftli.each (function (i) {$ (this). css ({zindex:i, WIDTH:LW, HEIGHT:LH, Opacity:1/oloop, LEFT:I*LF,//Set top value for each li: (27            0-LH)/2});           LW = Lw/setting.scale;          lh = Lh/setting.scale;        oloop--; })} Defau(); 

After initialization:

After initialization if you click on the left button then we just need to get the height of the previous frame, width, zindex, opcity, left, top value to the current frame, if the previous frame does not exist, get the last frame style to the current frame, do an animation, the right side of the same.

Here's the code:

Function Anima (dir) {var zindexarr=[]; if (dir = = = "Right") {All.each (function () {prev = $ (this). Prev (). Get (0)? $ (this). Prev (): lilast;//Judge before an Li is                No presence, if present put him to Prev, does not exist then put the last Li to the current frame var width = prev.width (), Height =prev.height (),                Opacity = PREV.CSS ("opacity"), left = Prev.css ("left"), top = PREV.CSS ("Top"),                            ZIndex = Prev.css ("ZIndex");            Zindexarr.push (ZIndex);  $ (this). Animate ({width:width, height:height, Opacity:opacity, left              : Left, Top:top},setting.speed,function () {Flag = true;           });            }); ZIndex need to be saved separately to prevent the loop when set to take again when the value is always the last ZIndex All.each (function (i) {$ (this). CSS ("ZIndex", Zindexarr           [i]);        }); }else if (dir = = = ' Left ') {All.each (function () {Next= $ (this). Next (). Get (0)-$ (this). Next (): Lifirst;                var width = next.width (), Height =next.height (), opacity = Next.css ("opacity"),                            left = Next.css ("left"), top = NEXT.CSS ("Top"), ZIndex = Next.css ("ZIndex");            Zindexarr.push (ZIndex);  $ (this). Animate ({width:width, height:height, Opacity:opacity, left               : Left, Top:top},setting.speed,function () {Flag = true;          });          });          All.each (function (i) {$ (this). CSS ("ZIndex", Zindexarr[i]);        }); }     }

Now just need to bind the click event to the cool effect on the implementation!

(to prevent the animation from being clicked here, you need to do a bit of processing with flag to determine what is really executing the function.) ) code is as follows:

      var Flag = true;      $ ('. Right_btn '). Click (function () {         if (Flag) {           flag=false;           Anima (' right ');         }      )      $ ('. Left_btn '). Click (function () {         if (Flag) {           flag=false;           Anima (' left ');         }      })

All right, excited little friends, let's go and feel your cool effect!

jquery Implements 3D Slideshow