Cool jquery Full Screen 3D Focus image animation effect _jquery

This is a very good jquery focus graph animation, it is characterized by the entire focus is full screen display, very atmosphere, and the image of the tilt also gives the entire focus of three-dimensional visual effects, and focus of the picture switch very smooth, quite practical.

HTML code:

<div class= "wrapper" > </div> <div id= "Pxs_container" class= "Pxs_container" > <div class= "PXS_BG" &
 Gt <div class= "pxs_bg1" ></div> <div class= "pxs_bg2" ></div> <div class= "Pxs_bg3" ></div > </div> <div class= "pxs_loading" >loading images...</div> <div class= "Pxs_slider_wrapper" > <ul class= "Pxs_slider" > <li></li> <li> </li> <li></li> <li></li> <li></li> <li></li> < /ul> <div class= "pxs_navigation" > <span class= "pxs_next" ></span> <span class= "Pxs_prev" >& Lt;/span> </div> <ul class= "Pxs_thumbnails" > <li></li> <li> </li> <li></li> <li></li> Gt;</li> <li></li> </ul> </div> </div>

JavaScript code

(function ($) {$.fn.parallaxslider = function (options) {var opts = $.extend ({}, $.fn.parallaxslider.defaults, Options)
 ;  Return This.each (function () {var $pxs _container = $ (this), o = $.meta? $.extend ({}, OPTs, $pxs _container.data ()):

  OPTs The main slider var $pxs _slider = $ ('. Pxs_slider ', $pxs _container),//the elements in the slider $elems = $pxs _sli Der.children (),//total number of elements Total_elems = $elems. Length,//the navigation $pxs buttons = $ ('. P Xs_next ', $pxs _container), $pxs _prev = $ ('. Pxs_prev ', $pxs _container),//the bg images $pxs _bg1 = $ ('. Pxs_bg1 ', $pxs _co Ntainer), $pxs _bg2 = $ ('. Pxs_bg2 ', $pxs _container), $pxs _bg3 = $ ('. Pxs_bg3 ', $pxs _container),//current image Curren t = 0,//the thumbs container $pxs _thumbnails = $ ('. Pxs_thumbnails ', $pxs _container),//the thumbs $thumbs = $pxs _thumbnails.children (),//the interval for the autoplay mode slideshow,//the loading image $pxs _loading = $ ('. Pxs _loading ', $Pxs_container), $pxs _slider_wrapper = $ ('. Pxs_slider_wrapper ', $pxs _container);

  The preload all the images var loaded = 0, $images = $pxs _slider_wrapper.find (' img ');
  $images. Each (the function () {var $img = $ (this);
   $ ('  '). Load (function () {++loaded;
   if (loaded = = total_elems*2) {$pxs _loading.hide ();

   $pxs _slider_wrapper.show ();

   One images width (assuming all images have the same sizes) var one_image_w = $pxs _slider.find (' Img:first '). width (); /* need to set width of the slider, of each one of its elements, and of the navigation buttons * * SETW Idths ($pxs _slider, $elems, Total_elems, $pxs _bg1, $pxs _bg2, $pxs _bg3, One_image_w, $pxs _next, $pxs

   _prev);  /* Set the width of the thumbs and spread them evenly */$pxs _thumbnails.css ({' width ': One_image_w +
   ' px ', ' margin-left ':-one_image_w/2 + ' px '};
   var spaces = one_image_w/(total_elems+1);
  $thumbs. Each (function (i) {  var $this = $ (this);
    var left = spaces* (i+1)-$this. Width ()/2;

    $this. CSS (' left ', left+ ' px ');
    if (o.thumbrotation) {var angle = Math.floor (Math.random () *41)-20; $this. css ({'-moz-transform ': ' Rotate (' + angle + ' deg ') ', '-webkit-transform ': ' Rotate (' + angle + ' deg ') ', ' t
    Ransform ': ' Rotate (' + angle + ' deg '}); //hovering the thumbs animates them up and down $this. Bind (' MouseEnter ', function () {$ (this). Stop (). Animate ({
    Top: ' -10px '},100);
    . bind (' MouseLeave ', function () {$ (this). Stop (). Animate ({top: ' 0px '},100);
   });

   });

   Make the The thumb is selected highlight ($thumbs. EQ (0));
    Slide when clicking the navigation buttons $pxs _next.bind (' click ', Function () {++current;
    if (>= total_elems) if (o.circular) current = 0;
    else{--current;
    return false;
    } highlight ($thumbs. EQ (current));
    Slide (current, $pxs _slider, $pxs _bg3, $pxs _bg2, $pxs _bg1,O.speed, o.easing, O.EASINGBG);
   });
    $pxs _prev.bind (' click ', Function () {--current;
    if (current < 0) if (o.circular) current = Total_elems-1;
    else{++current;
    return false;
    } highlight ($thumbs. EQ (current));
   Slide (current, $pxs _slider, $pxs _bg3, $pxs _bg2, $pxs _bg1, O.speed, o.easing, O.EASINGBG);

   }); /* Clicking a thumb would slide to the respective image */$thumbs. bind (' click ', function () {var $thumb = $ (th
    IS);
    Highlight ($THUMB);
    If AutoPlay interrupt when user clicks if (o.auto) clearinterval (slideshow);
    Current = $thumb. index ();
   Slide (current, $pxs _slider, $pxs _bg3, $pxs _bg2, $pxs _bg1, O.speed, o.easing, O.EASINGBG);

   });
    /* Activate the AutoPlay mode if that option is specified */if (O.auto!= 0) {o.circular = true;
    Slideshow = setinterval (function () {$PXS _next.trigger (' click ');
   },o.auto);}/* When resizing the windows, we need to recalculate the widths of the slider, elements on the new win
   dows width. We need to slide again to the "current one", since the left of the slider is no longer correct/$ (window). Resize
    (function () {W_w = $ (window). width ();
    Setwidths ($pxs _slider, $elems, Total_elems, $pxs _bg1, $pxs _bg2, $pxs _bg3,one_image_w, $pxs _next, $pxs _prev);
   Slide (current, $pxs _slider, $pxs _bg3, $pxs _bg2, $pxs _bg1, 1, o.easing, O.EASINGBG);

   });
  }). Error (function () {alert (' here ')}). attr (' src ', $img. attr (' src '));

 });
 });

 };

 The current windows width var w_w = $ (window). width ();  var slide = function (current, $pxs _slider, $pxs _bg3, $pxs _bg2, $pxs _bg1, speed, easing, EASINGBG) {var slide_to =
 parseint (-W_W * current);
 $pxs _slider.stop (). Animate ({left:slide_to + ' px '},speed, easing);
 $pxs _bg3.stop (). Animate ({left:slide_to/2 + ' px '},speed, EASINGBG); $pxs _bg2.stOP (). Animate ({LEFT:SLIDE_TO/4 + ' px '},speed, EASINGBG);
 $pxs _bg1.stop (). Animate ({left:slide_to/8 + ' px '},speed, EASINGBG);
 var highlight = function ($elem) {$elem. Siblings (). Removeclass (' selected ');
 $elem. addclass (' selected '); var setwidths = function ($pxs _slider, $elems, Total_elems, $pxs _bg1, $pxs _bg2, $pxs _bg3, One_image_w, $pxs _next , $pxs _prev) {/* The width of the "slider is" the Windows width Times "Total" of elements in the slider/V
 AR pxs_slider_w = w_w * TOTAL_ELEMS;
 $pxs _slider.width (pxs_slider_w + ' px ');
 Each element would have a width = Windows width $elems. width (w_w + ' px ');
 /* We also set the width of each BG image Div.
 The value is the same calculated for the Pxs_slider */$pxs _bg1.width (pxs_slider_w + ' px ');
 $pxs _bg2.width (pxs_slider_w + ' px ');

 $pxs _bg3.width (pxs_slider_w + ' px '); /* Both the right and left of the navigation next and Previous buttons'll be:windowwidth/2-IMGWIDTH/2 + some Margi N (notTo touch the image borders) * * var Position_nav = w_w/2-ONE_IMAGE_W/2 + 3;
 $pxs _next.css (' right ', Position_nav + ' px ');
 $pxs _prev.css (' left ', Position_nav + ' px ');
    } $.fn.parallaxslider.defaults = {auto:0,//how many seconds to periodically slide the content.
 If set to 0 then AutoPlay are turned off. Speed:1000,//speed of each slide animation easing: ' jswing ',//easing effect for the slide animation: ' EASINGBG ing ',//easing effect for the background animation circular:true,//circular slider Thumbrotation:true//the Thumbs
 L be randomly rotated};

 Easeinoutexpo,easeinback}) (JQuery);

Invoke JavaScript code for Plug-ins

$ (function () {
 var $pxs _container = $ (' #pxs_container ');
 $pxs _container.parallaxslider ();
});

The above is the entire content of this article, I hope to learn from the jquery program to help.