jquery implements a simple carousel diagram basic idea

Demo point here

The effect that needs to be achieved

Common Carousel Diagram Components
Auto page, left and right jump button, below is index
Index shows the current picture position, and the left and right buttons change the current position.
The first version temporarily does not define the API, write simple point

Approximate idea

Hide out of the picture with banner
ImageList is inline
Float to label position to display

First, HTML.

Changed from Sublime to Webstorm, with Emmet plugin
That's what you can write.
div.wrapper>div.banner>ul.imageList>(li>img)*4^img+img>ul.indexList>(li>img)*4
tabThat's how it works:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<Divclass="Wrapper" > <Divclass="Banner" > <Ulclass="ImageList" > <Li><ImgSrc=""alt="" ></Li> <Li><ImgSrc=""alt="" ></Li> <Li><ImgSrc=""alt="" ></Li> <Li><ImgSrc=""alt="" ></Li> </Ul> <ImgSrc=""alt="" ><ImgSrc=""alt="" > <Ulclass="Indexlist" > <Li><ImgSrc=""alt="" ></Li> <Li><ImgSrc=""alt="" ></LI> <li> <img src= Alt=</LI> <li><img Src=alt=</ LI> </UL> </div>, </DIV>

Emmet is very convenient.

Css

In order for the banner to obscure other elements, Overflow:hidden
Then Imglist's Li is all float:left,display:inline.
So you can slide around the back.
Left and Right buttons and indexlist need to use Position:absolute to locate
These two are centered with an absolute value of 50% and a negative value.

Jquery

Mainly through a changeto () to complete the jump to the specified image
Three Direct events: auto-change, click around, click Indexlist
are different calls to Changeto ():

1 2 3 Span class= "line" >4 5

function changeto ( Span class= "params" >num) { var goleft = num * 800; $ ( "px"},500); $ ( "Li"). Removeclass ( "Indexon"). EQ (num). addclass ( "Indexon"); /span>

There is a way to add a loop by setting a global variable:

1 2 3 4 5 6 7 8

var autochange = setinterval (function () { if (index<3) { index++ }Else { index=0 } Changeto (index) },1000);

The JS code needs to start the loop again (e.g. wrapper:hover )
You just need to re- autoChange assign the same value to start the loop again

jquery implements a simple carousel diagram basic idea