The carousel diagram of JS animation

first, the use of CSS3 animation implementation<!        DOCTYPE html>body,ul{List-Style:none;                }. outer{width:750px;                height:366px;                margin:100px Auto;                                Border:solid 2px Gray;                Overflow:hidden;            position:relative; }. inner{Width:500%; Height:100%;                position:relative; Left:0;            Animation:myani 15s linear infinite alternate; }. Inner img{float: Left; Width:20%; } @keyframes myani{0%{left:0;} 10%{left:0}                20%{left:-100%;} 30%{left:-100%;} 40%{left:-200%;} 50%{left:-200%;} 60%{left:-300%;} 70%{left:-300%;} 80%{left:-400%;} 100%{left:-400%;}                }. Outer ul{position:absolute;                bottom:16px; Left:50%; Transform:translatex (-50%);            Display:flex; }. Outer li{/*width:12px; height:12px;*/margin:010px; /*Background:white;*/border:solid 8px White; Border-radius:50%; }. Outer. Scroll-ball{Border-Color:yellowgreen;                position:relative; Left:-180px;            Animation:myball 15s linear infinite alternate; } @keyframes myball{0%{left:-180px;} 10%{left:-180px;} 20%{left:-144px;} 30%{left:-144px;} 40%{left:-108px;} 50%{left:-108px;} 60%{left:-72px;} 70%{left:-72px;} 80%{left:-36px;} 100%{left:-36px;} }        </style> 
second, the use of JS to implement HTML code:<!        DOCTYPE html>CSS code: body,ul,li{margin:0;padding:0;} A{text-Decoration:none;} Li{list-Style:none;}.    slideshow{width:800px;    height:500px;    margin:100px Auto;        Overflow:hidden; Position:relative;} #slideshow-item{Display:block; width:800px;}    #conLis {position:absolute;    bottom:16px; Left:50%; Transform:translatex (-50%);}. Slideshow li{margin:010px;    Border:solid 6px Black; Border-radius:50%; float: Left; Cursor:pointer;}        #leftBtn, #rightBtn {padding:8px 6px; Font-size:60px;        Color:white;        Background: #E7E7E7;    Position:absolute; Top:50%; Transform:translatey (-50%); Opacity:0.3; Cursor:pointer;} #leftBtn {left:15px;} #rightBtn {right:15px;} JS Code://get ElementvarSlideshow = Document.queryselector ('. Slideshow '));varScrollhref = GT ("Slideshow-href");varScrollitem = GT ("Slideshow-item");//Console.log (scrollhref+ "= = =" +scrollitem);varConlis = GT (' Conlis ');varItems = conlis.getelementsbytagname (' li ');varLEFTBTN = GT (' leftbtn ');varRIGTHBTN = GT (' rightbtn ');//set up a container to store picturesvarImgarr = ["Img/aaa.jpg", "img/bbb.jpg", "img/ccc.jpg", "img/ddd.jpg", "img/eee.jpg", "img/fff.jpg"];varHrefarr = ["Img/aaa.jpg", "img/bbb.jpg", "img/ccc.jpg", "img/ddd.jpg", "img/eee.jpg", "img/fff.jpg"];//Set index 0 for the first picture shownvarCurrentindex = 0; SCROLLITEM.SRC= Imgarr[0];scrollhref.href= Hrefarr[0];//sets the first small dot to yellowItems[0].style.bordercolor = "Yellow";//set a timed change picturevarTimer = setinterval (changeitem,2000);functionChangeitem () {Currentindex++;//image index increased by 1, showing the next picture    if(Currentindex = =imgarr.length) {Currentindex= 0; }    //call Picture Carousel, dynamically change the current index value to change the carousel pictureslideshow (currentindex);}//Picture CarouselfunctionSlideshow (i) {//set up carousel pictures and link imagesSCROLLITEM.SRC =Imgarr[i]; Scrollhref.href=Hrefarr[i]; //set the small dot effect for the carousel image     for(varj = 0; J < Items.length; J + +){        //set all small dots as the default styleItems[j].style.bordercolor = ' Black '; }        //set the small dot style for a single carouselItems[i].style.bordercolor = "Yellow";}//set the mouse to slide over the bottom navigation dot display the corresponding picture for(varj = 0; J < Items.length; J + +){    //For the event action in the For loop is to execute the loop first, to want the button each click is the button's subscript value, must first record I value,    //otherwise the OnClick event will be equal to the I value at the end of the for loop when the loop executes. Items[j].index = j;//assigns the loop data to the index in the list, prevents the closing function from getting the current index I, and the derived one is bound to the data on the DOM element indexItems[j].onmouseover =function() {clearinterval (timer);//Stop Automatic CarouselSlideshow ( This. Index); } items[j].onmouseout=function() {Currentindex= This. Index;//assigns an element index to Currentindex to ensure that the next automatic carousel continues the currentTimer = setinterval (changeitem,2000); }}//set the carousel on the left and right arrowsLeftbtn.onmouseover = Rightbtn.onmouseover =function() {leftBtn.style.opacity= "1"; RightBtn.style.opacity= "1"; //Mouse move to area stop Carouselclearinterval (timer);} Leftbtn.onmouseout= Rigthbtn.onmouseout =function() {leftBtn.style.opacity= "0.3"; RightBtn.style.opacity= "0.3"; //mouse off Start carouselTimer = setinterval (changeitem,2000);} Leftbtn.onclick=function(){    //determines whether the current picture is the first image index    if(Currentindex = =-1) {Currentindex= Imgarr.length-1;//assigns the last picture to the previous index} slideshow (currentindex);//Call the Carousel methodCurrentindex--;//Click the left button to do the subtraction operation}rightbtn.onclick=function(){    //determines whether the current picture is the index of the last picture    if(Currentindex = = Imgarr.length-1) {Currentindex= 0;//assign a value to the first picture index} slideshow (Currentindex); Currentindex++;}//encapsulating methods for acquiring elements through an IDfunctionGT (ID) {//parameters passed in string typeConsole.log ("Entry method")); returndocument.getElementById (ID); Console.log ("Get element succeeded");}
The carousel diagram of JS animation