JS's Carousel Effect

The carousel effect of the picture! The main use of the element's style style attributes, and setinterval ();

<! DOCTYPE html>{margin:0; padding:0;            } div{width:960px;            height:400px;            OUTLINE:1PX Black Solid;            margin:50px Auto;        Overflow:hidden;            } ul{width:28800px;            height:400px;                    OUTLINE:1PX Red Solid;            } li{width:960px;            height:400px; List-Style:none; float: Left; } button{margin-left:700px;; }    </style> <script>window.onload=function(){            varBnt=document.getelementsbytagname (' button ') [0]; varLis=document.getelementsbytagname (' Li '); varUl=document.getelementsbytagname (' ul ') [0];  for(vari=0;i<lis.length;i++) {Lis[i].style.marginleft=0; }            varTimeer=setinterval (function(){                varTimme=setinterval (function(){                    varMl=parseint (Lis[0].style.marginleft);//use the value of MarginLeft to move the pictureml=ml-30;//The picture moves 30px each time;lis[0].style.marginleft=ml+ ' px '; if(ml<=-960) {clearinterval (Timme);//when the first picture moves 960px, it clears the time and lets him stop for 5 seconds.                         varNewli=lis[0].clonenode (true);//at this point, clone an Li tag and his nodeUl.removechild (Lis[0]);//Remove the sub-nodes of ULNewli.style.marginLeft = 0; Ul.appendchild (NEWLI);//add clones to UL                    }                },50); },4000); Bnt.onclick=function() {window.clearinterval (timeer);    }        }; </script>
Homework: Use JS to make an accordion effect!
JS's Carousel Effect