Jquey implementation of the carousel chart effect

The usual browser page, Carousel diagram is an indispensable plate, in this summarizes some of the basic carousel pattern

First, introduce the basic effect of the Carousel diagram implemented in this paper:　　

1.3s automatically switch the picture, when the picture is switched, the cue point follows the switch
2. Mouse over the picture, automatically switch the carousel stop
3. The indicator points across the switch corresponding to the picture, the image switch cue point following the switch
4. Click the previous page Next button to toggle the image
5. A gradient effect when the picture is toggled

Writing of the lower surface start code

CSS Code

/*Initialize browser default style*/*{margin:0;padding:0;}/*Sowingmap*/. Sowingmap{width:800px;Height:500px;margin:0 Auto;position:relative;Overflow:Hidden;}/*Imgpart*/. Imgpart{width:800px;Height:500px;position:Absolute;}/*Imgswitch*/. Imgswitch{width:800px;Height:500px;position:Absolute;List-style:None;Display:None;cursor:Pointer;}. Imgswitch img{width:100%;Height:500px;}. Imgshow{Display:Block;}/*Spotpart*/. Spotpart{position:Absolute;Bottom:0;Height:40px; Left:36%;}. Spotpart P{width:20px;Height:20px;Border-radius:100%;Background-color:#fff;float: Left;Margin-left:20px;cursor:Pointer;}/*selected color of Cue point*/. Spotpart. Spotcolor{Background-color:#f00;}/*Previous next Toggle section*/. preimg,. Nextimg{width:70px;Height:70px;Border-radius:100%;Background-color:Rgba (255,255,255,0.5);text-align:Center;Line-height:70px;font-size:30px;Color:#f5f5f5;position:Absolute;Top:190px;cursor:Pointer;Display:None;}. Preimg{ Left:-35px;text-indent:25px;}. Nextimg{ Right:-35px;text-indent:-25px;}

CSS code block

HTML code

<Divclass= "Sowingmap">        <ulclass= "Imgpart">            <Liclass= "Imgswitch imgshow"><imgsrc= "Img/1.jpg"/></Li>            <Liclass= "Imgswitch"><imgsrc= "Img/2.jpg"/></Li>            <Liclass= "Imgswitch"><imgsrc= "Img/3.jpg"/></Li>            <Liclass= "Imgswitch"><imgsrc= "Img/4.jpg"/></Li>            <Liclass= "Imgswitch"><imgsrc= "Img/5.jpg"/></Li>      </ul>      <Divclass= "Spotpart">            <Pclass= "Spotcolor"></P>            <P></P>            <P></P>            <P></P>            <P></P>      </Div>      <Divclass= "Loopchange">             <Pclass= "Preimg">&lt;</P>             <Pclass= "Nextimg">&gt;</P>      </Div></Div>

The JS code implemented by the Carousel diagram function

//gets the number of elementsvarCount = $ ('. Imgswitch ')). length;varnum = 0;varStart =NULL;//Business 1: realize 3s clock automatic cycle switch picture, the picture toggles the cue point to follow the switch, the picture changes the effect which has the gradientfunctionLoopstart () {clearinterval (start); Start= SetInterval (function() {        //first Clear all styles$ ('. Imgswitch ')). Hide (); //determining the value of num by taking redundancy methodnum = (num + 1)%count; //picture Fade in$ ('. Imgswitch '). EQ (num). fadeIn (1000); $('. Spotpart p '). EQ (num). addclass ("Spotcolor"). Siblings (). Removeclass ("Spotcolor"); }, 2000);} Loopstart ();//Business 2: Mouse over the picture, the carousel stop automatically switch, after the draw continues to play$ ('. Imgswitch '). MouseOver (function() {//Mouse over Stopclearinterval (start);}); $('. Imgswitch '). Mouseout (function() {//Mouse UnderlineLoopstart ();});//Business Three: The indicator points across the switch corresponding to the picture, the image switch cue point following the switch$ ('. Spotpart p '). MouseOver (function() {clearinterval (start); //first Clear all styles$ ('. Imgswitch ')). Hide (); $('. Imgswitch '). EQ ($ ( This). Index ()). FadeIn (1000); $('. Spotpart p '). EQ ($ ( This). Index ()). addclass ("Spotcolor"). Siblings (). Removeclass ("Spotcolor");}); $('. Spotpart p '). Mouseout (function() {Loopstart ();});//Business Four: Click the previous page next page toggle$ ('. Sowingmap '). MouseOver (function() {clearinterval (start); $('. Loopchange p '). Show ();}); $('. Sowingmap '). Mouseout (function() {Loopstart (); $('. Loopchange p '). Hide ();}); $('. Preimg '). Click (function() {    $('. Imgswitch '). Hide (); if(Num <= 0) {num= 4; $('. Imgswitch '). EQ (num). fadeIn (1000); $('. Spotpart p '). EQ (num). addclass ("Spotcolor"). Siblings (). Removeclass ("Spotcolor"); }    Else if(Num <= 4) {        $('. Imgswitch '). EQ (num-1). FadeIn (1000); $('. Spotpart p '). EQ (num-1). addclass ("Spotcolor"). Siblings (). Removeclass ("Spotcolor"); Num--; }});$('. Nextimg '). Click (function() {    $('. Imgswitch '). Hide (); if(Num >= 4) {num= 0; $('. Imgswitch '). EQ (num). fadeIn (1000); $('. Spotpart p '). EQ (num). addclass ("Spotcolor"). Siblings (). Removeclass ("Spotcolor"); }    Else if(Num >= 0) {        $('. Imgswitch '). EQ (num+1). FadeIn (1000); $('. Spotpart p '). EQ (num+1). addclass ("Spotcolor"). Siblings (). Removeclass ("Spotcolor"); Num++; }});

Note, do not forget to introduce jquery grammar library, otherwise it will error YO!!!

For the above-mentioned index range, a simple approach to this approach, using the time a number is taken from the length value of the obtained element, no matter how, his range is just 0~a.length between

num = (num + 1)% count;

OK, it is convenient to use jquery to achieve the effect of the carousel, you are welcome to make valuable comments!!!

Jquey implementation of the carousel chart effect