Carousel Diagram Basic Each site will have, there are a lot of jquery plug-ins can be used, here is the JS code written.
@{Layout=NULL;}<! DOCTYPE html>"Viewport"Content="Width=device-width"/> <title>Test</title> <script src="~/scripts/jquery-1.8.2.min.js"></script>@*css style *@<style> *{ margin:0; padding:0; } ul { height: 600px; position: relative; } ul li {float: Left; List -style- type: none; Height: -%; background -position: -% -%; background - size: Cover; }. One { background -image: URL ("/content/1.jpg"); }. The { background -image: URL ("/content/2.jpg"); }. Three { background -image: URL ("/content/3.jpg"); }. Four { background -image: URL ("/content/4.png"); }. DW { position: absolute; bottom: 5px; width: -%; text - align: center; } OL { list - style: none; text - align: center; } ol li { display: inline-Block; width: 22px; height: 4px; padding: 4px; overflow: hidden; text -indent: -999em; cursor: pointer; background - color: white; }. hasclass { background - color: red; } </style> "position:relative; overflow:hidden; height:600px ;">@* How many Li,ul is the width of x00%*@ <ul style="width:600%; margin-left:-100%;">@* first put the last one in front, do the turn to give a person a sense of going in a direction *@
when the image is displayed, UL changes the style to the 4th image. <liclass=" Four"style="width:16.6667%"></li>@* Here Li label width is 16.66667% How to come, only 4 pictures do carousel, before and after each plus one is 6, 16.666667=100/6 if is 2 do carousel, altogether 4 Li, each Li's width Degree is 25%*@ @ * These 4 pictures do carousel *@<liclass=" One"style="width:16.6667%"></li> <liclass=" Both"style="width:16.6667%"></li> <liclass="three"style="width:16.6667%"></li> <liclass=" Four"style="width:16.6667%"></li>@* The last one behind, the first one to do the carousel gives a sense of being in one Direction *@
when the image is displayed, the UL changes the style to the 1th picture <liclass=" One"style="width:16.6667%"></li> </ul> <navclass="DW"> <ol > <li data-slide="0" class="Hasclass"></li> <li data-slide="1" class=""></li> <li data-slide="2" class=""></li> <li data-slide="3" class=""></li> </ol> </nav> </div></body>varmm; function hh () {//ul Li do move left$("ul"). Animate ({" Left":"+="+"-100%"}, -, function () {varI//get the first few values$("ol Li"). each (function () {if($( This). attr ("class") !="") {i= $( This). attr ("Data-slide"); } }); //because it is done once animation to find value, all when I is 3 o'clock, UL is left is-400%, that is, 5th picturei = parseint (i) +1; //if it's equal to 4, then reset it, there's 4 of them, and that's 4. if(parseint (i) = =4) {i=0; $("ul"). CSS (" Left","0%");//Reposition , UL left has been reset, because the picture has not changed, so give people a false impression of the direction } $("ol Li"). attr ("class","");//to remove all the Li's styles$("ol Li:eq ("+ parseint (i) +")"). attr ("class","Hasclass");//The following icons show}) mm= SetTimeout ("hh ()",4000);//animate every 4 seconds} $ (document). Ready (function () {mm= SetTimeout ("hh ()",4000); //the number of points to show a few about is also one thing, not written here$("ol"). On ("Click","Li", function () {varJJ = $ ( This). attr ("Data-slide");//the first few points$("ol Li"). attr ("class",""); $("ol Li:eq ("+ parseint (JJ) +")"). attr ("class","Hasclass");//The following icons showcleartimeout (mm); $("ul"). Animate ({" Left":"-"+ parseint (JJ) +"00%"}, -, function () {mm= SetTimeout ("hh ()",4000); }); //re-locate the next }) })</script>
Carousel Diagram--js Handwriting