JQuery carousel and jquery carousel

JQuery carousel and jquery carousel

Html:

<!--banner-->
<section class="banner" >
    <div class="container">
        <div class="wrapper">
            <div class="slide current"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
        <!-- Add Pagination -->
        <div class="pagination"></div>
        <!-- Add Arrows -->
        <div class="button-next"> < </div>
        <div class="button-prev"> > </div>
    </div>
</section>


CSS:

. Banner {
Height: 6rem;
Position: relative;
Width: 100%;
Overflow: hidden;
}
. Container {
Overflow: hidden;
Height: 6rem;
Margin: auto;
Position: relative;
Text-align: center;
}
. Wrapper {
Position: absolute;
Left: 0;
Top: 0;
}
. Slide {
Position: absolute;
Float: left;
Overflow: hidden;
Display: none;
}
. Wrapper. current {
Display: block;

}
@-Webkit-keyframes animations {
0% {-webkit-transform: translate (0 );}
/* 100% {-webkit-transform: translate (-1903px );}*/
}
/* // Subscript */
. Pagination {
Position: absolute;
Bottom:. 4rem;
Left: 50%;
Transform: translate (-50%, 0 );
}
. Pagination li {
List-style-type: none;
Float: left;
Display: inline-block;
Margin: 0 10px;
Cursor: pointer;
Border-radius: 50%;
Width:. 25rem;
Height:. 25rem; line-height:. 25rem;
}
. Pagination li. current {
Border: solid 1px # fff;
}
. Pagination li> span {
Display: inline-block;
Width:. 1rem;
Height:. 1rem;
Margin: auto;
Background: # fff;
Border-radius: 50%;
}
. Button-next,. button-prev {
Font-size: 20px;
Color: # fff;
Position: absolute;
Top: 50%;
}
. Button-next {
Left: 0px;
}
. Button-prev {
Right: 0px;
}

JS:

/* Banner carousel */
Var slide = $ ('. iner. wrapper. slide'); // a single
Var With = $ ('body'). width ();

Detail ('.container'detail .css ({'width': With}); // outermost Layout
$ ('. Container .wrapper'0000.css ({'width': With * slide. length });
Var ul_index = "<ul> ";
For (var I = 0; I <slide. length; I ++ ){
Ul_index + = "<li> <span> </li>"
}
Ul_index + = "</ul> ";
$ ('. Pagination'). append (ul_index );
Var s = $ ('. pagination ');

$ ('. Pagination li'). first (). addClass ('current ');
Var a = 0; // Save the subscript
Var len = $ ('. wrapper. slide'). length-1;
// Click switch on the left
$ ('. Button-next'). click (function (){
If (a = 0 ){
A = len;
} Else {
A --;
}
$ ('. Wrapper. slide'). eq (a). fadeIn (). siblings (). hide ();
$ ('. Pagination li'). eq (a). addClass ('stream'). siblings (). removeClass ('stream ');
});
// Click switch on the right
$ ('. Button-prev'). click (function (){
If (a = len ){
A = 0;
} Else {
A ++;
}
$ ('. Wrapper. slide'). eq (a). fadeIn (). siblings (). hide ();
$ ('. Pagination li'). eq (a). addClass ('stream'). siblings (). removeClass ('stream ');
});

// Move the cursor to the subscript
Var tions = $ ('. pagination li ');
For (var is = 0; is <tions. length; is ++ ){
Tions [is]. index = is;
Tions [is]. onmouseover = function (){
$ ('. Wrapper. slide'). eq (this. index). fadeIn (). siblings (). hide ();
$ ('. Pagination li'). eq (this. index). addClass ('stream'). siblings (). removeClass ('stream ');
}
}
Var time;
// Automatic carousel
Function autoFng (){
Time = setInterval (function (){
If (a = len ){
A = 0;
} Else {
A ++;
}
$ ('. Wrapper. slide'). eq (a). fadeIn (3000). siblings (). hide ();
$ ('. Pagination li'). eq (a). addClass ('stream'). siblings (). removeClass ('stream ');
},3000 );

}
AutoFng ();
$ ('. Iner'). mouseover (function (){
ClearInterval (time );
});
$ ('. Iner'). mouseout (function (){
AutoFng ();
});