JQuery arrow switches between images and jquery arrow Switches

JQuery arrow switches between images and jquery arrow Switches

JQuery arrow to switch Images

• Layout
• 3d displacement deformation Origin
• JQuery

Transform: translate3d (x, y, z );

X represents the length of the horizontal coordinate vector.
Y represents the length of the vertical coordinate vector.
Z represents the length of the z axis vector cannot be

Scale () Scaling

Transform-origin: 0 50%;

Top left | left top is equivalent to 0 0.
Top | top center | center top is equivalent to 50% 0
Right top | top right is equivalent to 100% 0
Left | left center | center left is equivalent to 0 50%.
Center | center is equivalent to 50% 50% (default)
Right | right center | center right is equivalent to 100% 50%
Bottom left | left bottom is equivalent to 0 100%.
Bottom | bottom center | center bottom equivalent to 50% 100%
Bottom right | right bottom equivalent to 100% 100%

Left, center right is a value in the horizontal direction, corresponding to a hundred points left = 0%; center = 50%; right = 100%
Top center bottom is a vertical value, of which top = 0%; center = 50%; bottom = 100%;

HTML section

<! Doctype html> 
CSS Section
<Style type = "text/css"> * {margin: 0; padding: 0 ;}. box {margin-top: 80px; width: 100%; height: 340px; position: relative;/* relative position */}. list {width: pixel PX; height: 300px; overflow: hidden; position: absolute; left: 50%; margin-left:-600px ;}. btn {position: absolute;/* absolute position */top: 50%; margin-top:-50px; width: 60px; height: 100px; line-height: 100px; /* Row Height */font-size: 30px; color: white; text-dec Oration: none;/* text modifier */text-align: center; background: rgba (0,255, 0 ,. 5); cursor: pointer;/* change the cursor style to finger */}. next {right: 0;} li {position: absolute; top: 0; left: 0; list-style: none; opacity: 0; transition: all 0.3 s bytes-out;} img {width: 751px; height: 300px; border: none; float: left ;}. p1 {transform: translate3d (-224px, 0.81) scale ();/* 3d displacement x, y, z x represents the length of the horizontal coordinate vector. y represents the length of the vertical coordinate vector. z represents the length of the z axis vector. Cannot be a percentage */}. p2 {transform: translate3d (0px, 0.81) scale (50%); transform-origin: 0; /* deformation origin * // * top left | left top is equivalent to 0 0 top | top center | center top is equivalent to 50% 0 right top | top right is equivalent to 100% 0 left | left center | center left is equivalent to 0 50% center | center is equivalent to 50% 50% (default) right | right center | center right is equivalent to 100% 50% bottom left | left bottom is equivalent to 0 100% bottom | bottom center | center B Ottom is equivalent to 50% 100% bottom right | right bottom, which is equivalent to 100% 100% * // * left. center right is a horizontal value with a score of left = 0% and center = 50%; right = 100% top center bottom is a vertical value, of which top = 0%; center = 50%; bottom = 100%; if only one value is obtained, the vertical value remains unchanged. */Opacity: 0.8; z-index: 2 ;}. p3 {transform: translate3d (224px, 0, 0) scale (1); z-index: 3; opacity: 1 ;}. p4 {transform: translate3d (449px, 0.81) scale (100%); transform-origin: 50% 0.8; opacity:; z-index: 2 ;}. p5 {transform: translate3d (672px, 0.81) scale );}. p6 {transform: translate3d (896px, 0.81) scale );}. p7 {transform: translate3d (1120px, 0.81) scale () ;}</style>
JavaScript Section
<Script type = "text/jscript"> var cArr = ["p7", "p6", "p5", "p4", "p3", "p2 ", "p1"]; var index = 0; $ (". next "). click (// next function () {nextimg () ;}) $ (". prev "). click (// previous function () {previmg () ;}) // previous function previmg () {cArr. unshift (cArr [6]); // Add one or more elements to the beginning of the array and return the new length cArr. pop (); // remove the last element // I is the index of the element, starting from 0 // e is the currently processed element // each loop, the currently processed element removes all classes and then adds the array index I class $ ("li "). each (function (I, e) {$ (e ). removeClass (). addClass (cArr [I]) ;}) index --; if (index <0) {index = 6 ;}show () ;}// next function nextimg () {cArr. push (cArr [0]); // Add one or more elements to the end of the array and return the new length cArr. shift (); // Delete the first value in the element array and return $ ("li "). each (function (I, e) {$ (e ). removeClass (). addClass (cArr [I]) ;}) index ++; if (index> 6) {index = 0 ;}show () ;}</script>
This article ends here
 
 
Reference http://www.w3cplus.com/css3/css3-3d-transform.html for this article