jquery implements a simple carousel diagram

Look at the effect first, if it's what you want, you can see

General idea:

1. Automatic Carousel
2. Specify the Carousel
3. Flip left and right

Detailed Steps: jquery section

• Set the first picture to show that the other sibling elements are hidden
• Auto-Carousel, specify the first index as i=0, and then i++, so that its corresponding I index of the picture display, the other hidden, when i=5 (that is, the sixth picture, make it the first one, otherwise we do not have the sixth picture will not show).
• Specify the picture carousel, that is, the mouse moves to the white circle to display the corresponding picture, and the timer stop, we can look at the image of the content, some of the carousel Chart timer or continue to see what content, the mouse left to continue the carousel.
• Turn left and right, and then go to the revolver, when i =-1 to make it 4 (should be able to know what the meaning of it, the reason with the automatic rotation of the parentheses in the contents), go to the left side of the carousel.

Okay, no more talking, just on the code.
Html

    <div id= "banner" > <div class= "pic" > <div class= "picimg" ></div> <div class=" picimg "></div> <div class= "picimg" ></div> <div class= "picimg" ></div> <div class= "picimg" ></                div> </div> <ul class= "tabs" > <li class= "bg" ></li> <li></li> <li></li> <li></li> &lt ;li></li> </ul> <div class= "btn btn1" >&lt;</div> <div C lass= "Btn btn2" >&Gt;</div> </div> 

Css

*{    margin:0px;    padding:0px;    list-style-type:none;}#banner{    width:520px;    height:280px;    position:absolute;    top:50%;    margin-top:-140px;    left:50%;    margin-left:-260px;}.pic img{    position:absolute;}.tabs{    position:absolute;    bottom:10px;    left:200px;}.tabs li{    width:20px;    height:20px;    border:2px solid #fff;    float:left;    margin-left:5px;    border-radius:100%;}.btn{    width:30px;    height:50px;    background-color:rgba(0,0,0,.5);    color:#fff;    font-size:30px;    line-height:50px;    text-align:center;    position:absolute;    top:50%;    margin-top:-25px;    cursor:pointer;}.btn:hover{    background-color:rgba(0,0,0,.8);    color:red;}.btn1{    left:0;}.btn2{    right:0;}.bg{    background-color:red;}

Js

var I=0;var timer;$ (function () {$ (". Picimg"). EQ (0). Show (). siblings (). Hide ();    The default first picture shows that other hidden//auto-carousel Timerbanner (); Click on red Circle $ (". Tabs li"). Hover (function () {//mouse Move Up clearinterval (timer);//Let the timer temporarily stop clearing the timer i=$ (this). Index   ();           Gets the index of the Circle Showpic ();    Call the method that displays the picture, display the index corresponding to the picture},function () {//mouse away from Timerbanner ();    Continue the Carousel timer start});        Click the left and right button $ (". Btn1"). Click (function () {clearinterval (Timer);   i--;        Go to left if (i==-1) {i=4;        } showpic ();    Timerbanner ();    });        $ (". Btn2"). Click (function () {clearinterval (Timer);   i++;        Go to right if (i==5) {i=0;        } showpic ();    Timerbanner (); });});/        /Carousel Part Function Timerbanner () {Timer = SetInterval (function () {i++;        if (i==5) {i=0; } showpic ()},1000);}    Display picture function Showpic () {$ (". Picimg"). EQ (i). Show (). siblings (). Hide (); $ (". Tabs li"). EQ (i). addclass ("BG "). Siblings (). Removeclass (" BG "); 

The idea also she used, this example is very simple, the code also has the detailed comment, has not understood at any time calls me, sees namely returns,
Download Link:
Link: https://pan.baidu.com/s/1Ar7vP_cPUAwmw6UipnnzFg Password: Ypol

jquery implements a simple carousel diagram