JQuery image carousel and jquery carousel

JQuery image carousel and jquery carousel

HTML

<Div class = "carousel">
<Ul class = "car-img">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
<Div class = "navgation">
<Span class = "nav-prev"> </span>
<Span class = "nav-next"> </span>
</Div>
<Ul class = "car-btn">
<Li class = "lihover"> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Div>

CSS

*{
Margin: 0;
Padding: 0;
Border: 0;
Box-sizing: border-box;
}
Li {
List-style: none;
}
. Carousel {
Position: relative;
Width: 100%;
Height: 600px;
}
. Carousel. car-img {
Position: relative;
Width: 100%;
Height: 100%;
Overflow: hidden;
}
. Carousel. car-img li {
Position: absolute;
Top: 0;
Left: 0;
Width: 100%;
Height: 100%;
}
. Carousel. car-img li img {
Border: 0;
Width: 100%;
Height: 100%;
}
. Carousel. navgation {
Position: absolute;
Top: 295px;
Width: 100%;
Color: # fff;
Font-size: 30px;
Line-height: 45px;
}
. Carousel. navgation. nav-prev {
Display: inline-block;
Width: 30px;
Height: 50px;
Background: rgba (51, 51,. 5 );
}
. Carousel. navgation. nav-next {
Float: right;
Display: inline-block;
Width: 30px;
Height: 50px;
Background: rgba (51, 51,. 5 );
}
. Carousel. navgation. nav-prev.btnhover,. carousel. navgation. nav-next.btnhover {
Color: red;
Cursor: pointer;
}
. Carousel. car-btn {
Position: absolute;
Bottom: 20px;
Width: auto;
Margin-left: calc (50%-120px );
Overflow: hidden;
}
. Carousel. car-btn li {
Float: left;
Margin: 10px;
Width: 20px;
Height: 20px;
Border-radius: 20px;
Background: rgba (102,255 );
}
. Carousel. car-btn li. lihover {
Float: left;
Margin: 10px;
Width: 20px;
Height: 20px;
Border-radius: 20px;
Background: rgba );
}

JQuery

$ (Function (){
Var isPagerClick = false, // determine the lower button
IsPrevClick = false, // determines the button for sliding left and right
Index = 0, // target value
Pre = 0,
Handid;
Start ();
Function start (){
Init (); // initialize the Function
$ (". Car-img li"). eq (0). fadeIn (). siblings (). fadeOut ();
Handid = setInterval (play, 2000); // carousel
}
Function init (){
$ (". Car-btn li"). bind ("click", pagerClick); // bind a click event to the button
$ (". Navgation span"). bind ("click", btnClick); // bind a click event to the left and right buttons.
$ (". Navgation span"). hover (btnMouseOver, btnMouseOut );
}
Function pagerClick () {// Click Event of the small button
IsPagerClick = true; // already clicked
ClearInterval (handid); // remove setInterval
Var oPager = $ (this). index (); // obtain the index value of the clicked button
If (oPager! = Pre) // determine the button position
{
Index = oPager-1;
Play ();
}
}
Function btnClick (){
If ($ (this). hasClass ("nav-prev") {// determine the left or right of the clicked button
IsPrevClick = true;
ClearInterval (handid );
If (index = 0 | index = 1)
{
If (index = 0) {index = $ (". car-img li"). length-2 ;}
Else {index = $ (". car-img li"). length-1 ;}
} Else
{
Index-= 2;
}
Play ();
}
Else {
IsPrevClick = true;
ClearInterval (handid );
Play ();
}
}
Function btnMouseOver (){
$ (This). addClass ("btnhover ");
}
Function btnMouseOut (){
$ (This). removeClass ("btnhover ");
}
Function play (){
Index ++;
If (index = $ (". car-img li"). length)
{
Index = 0;
}
$ (". Car-img li"). eq (pre). fadeOut (100, function (){
$ (". Car-img li"). eq (index). fadeIn (500, function (){
If (isPagerClick) // you can determine if you have clicked
{
Handid = setInterval (play, 2000); // reset setInterval
IsPagerClick = false;
};
If (isPrevClick)
{
Handid = setInterval (play, 2000 );
IsPrevClick = false;
}
}). Siblings (). fadeOut ();
$ (". Car-btn li"). eq (index). addClass ("lihover ");
$ (". Car-btn li"). eq (pre). removeClass ("lihover ");
Pre = index;
});
}
})