I use the jquery library jquery-3.2.1.js can be downloaded on the official website: http://jquery.com/download/
<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title>jquery Implementation Carousel Diagram </title> <script type="Text/javascript"Src="Jquery-3.2.1.js"></script> <style>#lunbo {width:850px; height:500px; margin:0px Auto; position:relative; Overflow:hidden; } #list {Position:absolute; width:4250px; height:500px; Z-index:1; } #list img {width:850px; height:500px; float: Left; } #buttons {Position:absolute; width:90px; height:15px; Z-index:2; left:389px; bottom:20px; } #buttons span {width:15px; height:15px; Background: #f1f1f1; float: Left; Margin-right:15px; Border-radius: -%; Cursor:pointer; } #buttons. On {background: #cf1828; }. Arrow {position:absolute; top:230px; Z-index:2; Display:none; width:35px; height:60px; Font-size:30px; Font-Weight:bold; Line-height:60px; Text-Align:center; Color: #fff; Background-color:rgba (0,0,0, .3); Cursor:pointer; Text-Decoration:none; }. arrow:hover {background-color:rgba (0,0,0, .7); } #lunbo: hover. arrow {display:block; } #prev {left:0px; } #next {right:0px; } </style> <script>$ (document). Ready (function () {varLunbo = $ ("#lunbo"); varList = $ ("#list"); varPrev = $ ("#prev"); varNext = $ ("#next"); varSpangroup = $ ("#buttons span"); varImgWidth = $ ("#list Img:first-child"). EQ (0). width (); varnow =1; varTimer =NULL; Prev.on ("Click", function () {clearinterval (timer); now--; if(Now <0) { if(Math.Abs (now)%3==1) { now=2; } Else if(Math.Abs (now)%3==2) { now=1; } Else{ Now=0; }} showpic (now); if(now = =0) { now=3; } if(now = =4) { now=1; } }); Next.On ("Click", function () {clearinterval (timer); now++; if(Now >4) { if(now%3==0) { now=3; } Else if(now%3==1) { now=4; } Else{ Now=2; }} showpic (now); if(now = =0) { now=3; } if(now = =4) { now=1; } }); Spangroup.on ("Click", function () { now= Spangroup.index ( This) +1; Showpic (now); }); Timer= SetInterval (Auto, the); function Auto () { now++; Showpic (now); if(now = =0) { now=3; } if(now = =4) { now=1; }} lunbo.mouseover (function () {clearinterval (timer); }); Lunbo.mouseout (function () {Timer= SetInterval (Auto, the); }) function Showpic (index) {list.animate ({left:-index * ImgWidth}, +, function () {SPANGROUP.EQ (index-1) %3). AddClass (" on"). Siblings (). Removeclass (" on"); if(Index = =0) {list.css ({" Left": -3* ImgWidth +"px" }); } if(Index = =4) {list.css ({" Left":-imgwidth +"px" }); } }); }; }); </script>"Lunbo"> <div id="List"style="left:-850px"> "images/lunbo3.jpg"alt="3"/> "images/lunbo1.jpg"alt="1"/> "images/lunbo2.jpg"alt="2"/> "images/lunbo3.jpg"alt="3"/> "images/lunbo1.jpg"alt="1"/> </div> <div id="Buttons"> <spanclass=" on"></span> <span></span> <span></span> </div> < ; a href="javascript:;"Id="prev" class="Arrow"><</a> <a href="javascript:;"Id="Next" class="Arrow">></a> </div></body>jquery implementation of Carousel diagram