Jquery huya TV3D carousel effects, jquery huya tv3d Effects

Jquery huya TV3D carousel effects, jquery huya tv3d Effects

Css section:

*{
Margin: 0px;
Padding: 0px;
}
Body {
Margin: 0px;
Padding: 0px;
Text-align: center;
}
# Banner {
Margin: 0px auto;
Width: 1030px;
Height: 250px;
Position: relative;
}
# Banner div img {
Width: 100%;
Height: 100%;
}
# Banner. img_bottom1 {
Left: 0px;
Top: 50px;
Width: 340px;
Height: 150px;
Z-index: 8;
Position: absolute;
}
# Banner. img_bottom2 {
Left: 630px;
Top: 50px;
Width: 340px;
Height: 150px;
Z-index: 8;
Position: absolute;
}
# Banner. img_left {
Left: 0px;
Top: 25px;
Width: 400px;
Height: 200px;
Z-index: 9;
Position: absolute;
}
# Banner. img_center {
Left: 265px;
Top: 0px;
Width: 500px;
Height: 250px;
Z-index: 10;
Position: absolute;
}
# Banner. img_right {
Left: 630px;
Top: 25px;
Width: 400px;
Height: 200px;
Z-index: 9;
Position: absolute;
}
. Btn_left {
Text-align: center;
Position: absolute;
Left: 0px;
Top: 0px;
Width: 265px;
Height: 250px;
Cursor: pointer;
Background: # ccc;
Z-index: 11;
Opacity: 0.01;
}
. Btn_right {
Text-align: center;
Position: absolute;
Right: 0px;
Top: 0px;
Width: 265px;
Height: 250px;
Cursor: pointer;
Background: # ccc;
Z-index: 11;
Opacity: 0.01;
}
. Left {
Left: 100px;
Top: 100px;
Width: 50px;
Height: 50px;
Z-index: 12;
Opacity: 0.8;
Color: white;
Cursor: pointer;
Display: none;
Font-size: 40px;
Background: black;
Line-height: 50px;
Position: absolute;
Text-align: center;
Border-radius: 70px;
}
. Right {
Right: 100px;
Top: 100px;
Width: 50px;
Height: 50px;
Z-index: 12;
Opacity: 0.8;
Color: white;
Cursor: pointer;
Display: none;
Font-size: 40px;
Background: black;
Line-height: 50px;
Position: absolute;
Text-align: center;
Border-radius: 70px;
}

Jquery section:

$ (Function (){

// Left and right carousel click events
Var $ d =$ ("# banner> div ");
Var mask = false;
$ ('. Btn_left'). click (function (){
If (! Mask ){
Mask = true;
Move (false );
}
})
$ ('. Btn_right'). click (function (){
If (! Mask ){
Mask = true;
Move (true );
}
})
// Wrap the width, height, left, top, and z-index of the carousel div using arrays.
Function move (direction ){
Var arrw = [], arrh = [], arrt = [], arrl = [], arri = [];
For (var I = 0; I <$ d. length; I ++ ){
Arrw1_i1_1_d.eq(i2.16.css ('width ');
Arrh1_i1_1_d.eq(i2.16.css ('height ');
Arrt? I ==d.eq( I =.css ('top ');
Arrl1_i1_1_d.eq(i2.16.css ('left ');
Arri? I =#d.eq( I =.css ('z-Index ');
}
For (var I = 0; I <$ d. length; I ++ ){
Var n;
// Change the direction of carousel by judging the click direction
If (direction ){
// Loop to the left
N = I-1;
If (n <0) {n = $ d. length-1}
} Else {
// Loop to the right
N = I + 1;
If (n> $ d. length-1) {n = 0}
}
// Obtain the array value to animation the previous or next div to achieve the 3D carousel effect.
D.eq( I ).css ('z-Index', arri [n]). animate ({
"Width": arrw [n],
"Height": arrh [n],
"Top": arrt [n],
"Left": arrl [n],
// Determine whether the animation is complete to debug the bug
}, 600, function () {mask = false });
}

}

})
Body section:

<Div id = "banner">
<Div class = "img_bottom1"> </div>
<Div class = "img_left"> </div>
<Div class = "img_center"> </div>
<Div class = "img_right"> </div>
<Div class = "img_bottom2"> </div>
<Span class = "btn_left"> </span>
<Span class = "btn_right"> </span>
<Span class = "bt left"> </span>
<Span class = "bt right" >></span>
</Div>