JavaScript learns---Self-written pictures carousel

The effect is as follows:

Picture timed Carousel

Click Left or right to display the next or previous picture

index.html file

CSS style code: (CSS/STYLE.CSS)
. content{width:450px;height:300px;margin:120px Auto;} #cimg1 img{width:450px;height:300px;} #cimg4 {  width:30px;  height:25px;  position:relative;left:0px;top:-150px;  } #cimg5 {  width:30px;  height:25px;  position:relative;left:420px;top:-175px;} #cimg4 img{width:20px;height:25px;} #cimg5 img{width:20px;height:25px;} #text {height:50px;width:100%;background: #222222;p osition:relative;left:0px;top:-100px;} #text p{color: #fff; text-align:center;}
JavaScript code (JS/IDNEX.JS)
Gets the object that placed the picture Div Cimg1obj=document.getelementbyid ("cimg1"); Imgsobj=document.getelementbyid ("IMGs"); textobj= document.getElementById ("Textfont"), or//flip the picture Cimg4obj=document.getelementbyid ("Cimg4"); cimg5obj= document.getElementById ("Cimg5"); Cimg4obj.onmouseover=function () {cimg4obj.style.background= "#b3b3b3";  Cimg4obj.style.borderradius= "20px"} cimg4obj.onmouseout=function () {cimg4obj.style.background= "";} Cimg5obj.onmouseover=function () {cimg5obj.style.background= "#b3b3b3"; cimg5obj.style.borderradius= "20px"} Cimg5obj.onmouseout=function () {cimg5obj.style.background= "";} The left icon is clicked//variable i is used to record the current picture//can control the number of the picture carousel the maximum value of the current I can only be 3, the minimum is 0i=1;imgsobj.src= "images/" +i+ ". jpg";// The default slide out of the picture is the first textadd ();//The Left icon is clicked Cimg4obj.onclick=function () {i--;if (i==0) {i=3;} Imgsobj.src= "images/" +i+ ". jpg";//Rewrite picture path Textadd ();} The right icon is clicked when Cimg5obj.onclick=function () {i++;if (i==4) {i=1;} Imgsobj.src= "images/" +i+ ". jpg";//Rewrite picture path Textadd ();}  Create timer to implement automatic picture carousel every 5 seconds for a picture setinterval ("Jishi ()", 5000),//1000 for 1 seconds function Jishi () {         I++;if (i==4) {i=1;}        Imgsobj.src= "images/" +i+ ". jpg";//Rewrite picture path Textadd (); }//Add text function Textadd () {switch (i) to the corresponding image {case 1:textobj.innerhtml= "farewell My Concubine" <br/> said a lifetime! , one months, one day, an hour, are not counted for a lifetime! "Break;case 2:textobj.innerhtml=", "Spring is leaking" <br/> ask who does not want to start from the beginning, but the world how much love can again? Break;case 3:textobj.innerhtml= "East evil West Poison" <br/> when you can't have it again. The only thing you can do is let yourself not forget.         "; break;}}
JavaScript learns---Self-written pictures carousel