PC-side Mobile-compatible large-graph carousel

Body, HTML{width:100%; }        * {margin:0;padding:0;List-style:None; }. Haha{List-style-type:None; }. Nav{width:100%;Height:300px;Overflow:Hidden;position:relative; }. Warp{Height:300px;position:Absolute; }. Warp. Haha{Height:300px;float: Left;-webkit-box-sizing:Border-box;-moz-box-sizing:Border-box;box-sizing:Border-box; }. Warp img{width:100%;Height:Auto; }. Nouse{width:100%;position:Absolute;Bottom:0; Left:0; }. Point{width:140px;margin:0 Auto; }. Point > Div{width:20px;Height:20px;Border-radius:50%;Background-color: White;Margin-left:30px;float: Left; }. Point > Div:first-child{Margin-left:0; }. Nav. Point.{Background-color:Red;width:40px;Height:20px;Border-radius:10px; }

<Divclass= "NAV">    <Divclass= "Warp">        <Divclass= "haha"><imgsrc=""></Div>        <Divclass= "haha"><imgsrc=""></Div>        <Divclass= "haha"><imgsrc=""></Div>    </Div>    <Divclass= "Nouse">        <Divclass= "point">            <Divclass= "On"></Div>            <Div></Div>            <Div></Div>        </Div>    </Div>

<script type= "Text/javascript" >varp = 0; varLen = $ ('. Haha ')). length; varWarp = $ ('. Warp ')); varTimer =NULL; varfirstimg = $ ('. Warp. Haha '). First (). Clone (); $('. Warp '). Append (firstimg). Width ($ ('. Warp. Haha '). length * 100 + '% '); $('. Warp. Haha '). Width (Over/$ ('. Warp. Haha '). Length + '% '); varismoved; //Automatic Switching    functionChange () {p++; if(p = = $ ('. Warp. Haha ')). length) {p= 1; $('. Warp '). CSS (' left ', ' 0px '));        }        ; Warp.stop (). Animate ({left:-P * 100 + '% '}, 1000,function() {console.log (P); if(p = = $ ('. Warp. Haha '). length-1) {                $('. Point div '). EQ (P-$ ('. Warp. Haha '). length + 1). addclass ("in"). Siblings ("div"). Removeclass ("on"); } Else {                $('. Point div '). EQ (P). addclass ("in"). Siblings ("div"). Removeclass ("on").);    }        }); }//timer = setinterval (change, 2300);    $(". Point div"). Click (function() {clearinterval (timer); $( This). AddClass ("on"). Siblings ("div"). Removeclass ("on").); P= $( This). index (); Warp.stop (). Animate ({left:-P * 100 + '% '}, 1000,function () {//timer = setinterval (change, 2300);        }) ; })        varPagex,pagey; $('. Warp '). On (' Touchstart ',function(e) {vartouches = E.originalevent.targettouches[0]; PageX=Touches.pagex; Pagey=Touches.pagey; }). On (' Touchmove ',function(e) {vartouches = E.originalevent.targettouches[0];             if(touches.pagex>pagex-20 && Math.Abs (touches.pagey-pagey) <math.abs (touches.pagex-PageX)) {                if(ismoved) {return‘‘; } ismoved=trueclearinterval (timer); $( This). AddClass ("on"). Siblings ("div"). Removeclass ("on").); P--; if(p<0{warp.css ({left:-(len) *100+ "%"}); P=len-1; $(". Point div"). Removeclass (' in '). EQ (P). addclass (' on ')                } Else {                    $(". Point div"). Removeclass (' in '). EQ (P). addclass (' on ')} console.log (P) warp.stop (). Animate ({left:-P * 100 + '% '}, 1000,function () {//timer = setinterval (change, 2300);Ismoved=false;            }) ; }            Else if(Touches.pagex<pagex+20 && Math.Abs (touches.pagey-pagey) <math.abs (touches.pagex-PageX)) {                if(ismoved) {return‘‘; } ismoved=trueclearinterval (timer); $( This). AddClass ("on"). Siblings ("div"). Removeclass ("on").); P++; if(p>Len) {Warp.css ({left:0+ "%"}); P=1; $(". Point div"). Removeclass (' in '). EQ (P). addclass (' on ')                }Else{Console.log (P>=len?0:p) $ (". Point div"). Removeclass (' on '). EQ (p>=len?0:p). addclass (' on '))} console.log (P) warp.stop (). Animate ({left:-P * 100 + '% '}, 1000,function () {//timer = setinterval (change, 2300);Ismoved=false;            }) ; }        })  varx, y; $ (document). MouseDown (function(event) {//get the position of the mouse pressx =Event.pagex; Y=Event.pagey;}); $ (document). MouseUp (function(event) {//Mouse Release     varNEWX =Event.pagex; varNewy =Event.pagey; if(x<newx-20 && Math.Abs (y-newy) <math.abs (X-newx)) {         if(ismoved) {return‘‘; } ismoved=trueclearinterval (timer); $( This). AddClass ("on"). Siblings ("div"). Removeclass ("on").); P--; if(p<0{warp.css ({left:-(len) *100+ "%"}); P=len-1; $(". Point div"). Removeclass (' in '). EQ (P). addclass (' on ')         } Else {             $(". Point div"). Removeclass (' in '). EQ (P). addclass (' on ')} console.log (P) warp.stop (). Animate ({left:-P * 100 + '% '}, 1000,function () {//timer = setinterval (change, 2300);Ismoved=false;     }) ; }     Else if(X>newx+20 && Math.Abs (y-newy) <math.abs (X-newx)) {         if(ismoved) {return‘‘; } ismoved=trueclearinterval (timer); $( This). AddClass ("on"). Siblings ("div"). Removeclass ("on").); P++; if(p>Len) {Warp.css ({left:0+ "%"}); P=1; $(". Point div"). Removeclass (' in '). EQ (P). addclass (' on ')         }Else {             $(". Point div"). Removeclass (' on '). EQ (p>=len?0:p). addclass (' on '))} console.log (P) warp.stop (). Animate ({left:-P * 100 + '% '}, 1000,function () {//timer = setinterval (change, 2300);Ismoved=false;     }) ; } })    $(' img '). On (' MouseDown ',function(e) {E.preventdefault ()})

Finally, don't forget to introduce JQ

PC-side Mobile-compatible large-graph carousel