jquery and Html+css implement a carousel with small dots and left and right buttons

Yes! You're not mistaken! Or a carousel diagram. This time of the jquery yo!!

CSS code:

/* Carousel Map Left/right button small white point */#second_div {margin-top:160px;}. Img_box{overflow:hidden;width:100%;height:420px;border:1px solid;position:relative;}. Img_box img{width:100%;p Osition:absolute;}. ul5{list-style:none;position:absolute;left:580px;top:565px;}. Ul5 Li{float:left;margin-left:20px;width:40px;height:5px;border:0px;background:lawngreen;}. D1,.d2{width:50px;height:60px;background-color:rgba (10,10,10,0.5); text-align:center;font-size:26px;font-weight : 800px;line-height:60px;cursor:pointer;}. d1{position:absolute;top:373px;left:25px;}. d2{position:absolute;top:373px;left:1445px;}

HTML code:

<!--carousel Map--><div id= "Second_div" ><div class= "Img_box" > </div><ul class=" UL5 "> <li></li><li></li><li></li><li></li></ul><div class= " D1 "><</div><div class=" D2 ">></div></div>

JS Code:

<script type= "Text/javascript" >$ (document). Ready (function(){//Search Button$ ("#ss"). Click (function(){        varNew_li = $ ("<li>" + $ ("#skuang"). Val () + "</li>"); $("#d1 ul"). Append (New_li); $("#d1"). Hide (); $("#skuang"). Val (""); })        $("#skuang"). Focus (function(){            $("#d1"). CSS ("Display", "block");                }); $("#skuang"). blur (); $("#qingch"). Click (function(){            $("#d1 li:gt (0)"). Remove (); $("#d1"). Hide (); });//Carousel Diagram        varimg=$ (". Img_box img"); varli=$ (". Ul5 li"); vardivw=$ (". Img_box"). width (); varlen=$ (". Img_box img"). length; Img.css ("Left", DIVW); Img.eq (0). css ("left", 0); Li.eq (0). css ("Background", "Red"); varIndex=0; varNext=0; functionShow () {Next++; if(next==Len) {Next=0; } img.eq (Next). CSS ("Left", DIVW); Img.eq (Index). Animate ({"Left":-DIVW}); Img.eq (Next). Animate ({"Left": 0}); Li.eq (Next). CSS ("Background", "Red"); Li.eq (Index). CSS ("Background", "Lawngreen"); Index=Next; } t=setinterval (show,2000); functionShow1 () {Next--; if(Next==-1) {Next=len-1; } img.eq (Next). CSS ("Left",-DIVW); Img.eq (Index). Animate ({"Left":d IVW}); Img.eq (Next). Animate ({"Left": 0}); Li.eq (Next). CSS ("Background", "Red"); Li.eq (Index). CSS ("Background", "Lawngreen"); Index=Next; } img.hover (function() {clearinterval (t); },function() {T=setinterval (show,2000); })        //left and Right buttons$ (". D2"). MouseDown (function() {clearinterval (t);        Show (); })        $(". D2"). MouseDown (function() {T=setinterval (show,2000); })            $(". D1"). MouseDown (function() {clearinterval (t);        Show1 (); })        $(". D1"). MouseDown (function() {T=setinterval (show,2000); })        //Small white dot clickLi.mousedown (function() {num=$( This). index (); if(num==next) {                return; }Else if(num<next)                {clearinterval (t); Img.eq (num). CSS ("Left",-DIVW); Img.eq (Index). Animate ({"Left":d IVW}); Img.eq (num). Animate ({"Left": 0}); Li.eq (num). CSS ("Background", "Red"); Li.eq (Index). CSS ("Background", "Lawngreen"); Index=num; Next=num; }Else if(num>next)                    {clearinterval (t); Img.eq (num). CSS ("Left", DIVW); Img.eq (Index). Animate ({"Left":-DIVW}); Img.eq (num). Animate ({"Left": 0}); Li.eq (num). CSS ("Background", "Red"); Li.eq (Index). CSS ("Background", "Lawngreen"); Index=num; Next=num; }}) Li.mouseup (function() {T=setinterval (show,2000); })        })    </script>

That's it! Do you understand????

jquery and Html+css implement a carousel with small dots and left and right buttons