CSS3 animation effects combined with JS's carousel

<style> *{margin:0;padding:0}#big{width:100%;Height:280px; }. Carousel-wrapper{width:500px;Height:280px;margin:100px Auto;Perspective:600px; }#carousel{width:500px;Height:280px;List-style-type:None;position:relative; }#carousel Li{position:Absolute; Left:0;Top:0;transition:all 1s ease 0s;cursor:Pointer; }. King{Z-index:Ten; }. LEFT1{Transform:Rotatey (30deg) Translatez ( -150px) TranslateX ( -100px);Z-index:9; }. left2{Transform:Rotatey (40deg) Translatez ( -300px) TranslateX ( -200px);Z-index:8; }. right1{Transform:Rotatey ( -30deg) Translatez ( -150px) TranslateX (100px);Z-index:9; }. Right2{Transform:Rotatey ( -40deg) Translatez ( -300px) TranslateX (200px);Z-index:8; }. Bench-warmer{Transform:Translatez ( -200px);Opacity:0; }. Carousel-wrapper span{width:60px;Height:60px;Line-height:60px;text-align:Center;font-size:50px;Color: White;position:Absolute; Left:-320px;Top:50%;/*margin-top:-30px;*/Transform:Translatey ( -50%);Background-color:rgba (0, 0, 255,. 5);Z-index: One;cursor:Pointer; }. Carousel-wrapper #right-btn{ Right:-320px; Left:Auto; }</style>

<script>window.onload=function(){            varLeft_btn =document.getelementbyid ("Left-btn"); varRight_btn=document.getelementbyid ("Right-btn"); varCarousel =document.getelementbyid ("Carousel"); varLis =carousel.getelementsbytagname ("Li"); varLock =false; //Save the class name inside the array            varclasses=["left2", "Left1", "King", "right1", "right2", "Bench-warmer", "Bench-warmer", "Bench-warmer", "Bench-warmer"]; Right_btn.onclick=function(){                if(lock==false){                    //Set Timerlock=true; SetTimeout (function() {lock=false; },1000) Classes.unshift (Classes.pop ()); //get all the class names                     for(vari=0;i<classes.length;i++) {Lis[i].classname=Classes[i]; } }} Left_btn.onclick=function(){                if(lock==false) {lock=true; SetTimeout (function() {lock=false; },1000)                    //array of additions and deletionsClasses.push (Classes.shift ()); //iterate through the modified array                     for(vari=0;i<classes.length;i++) {Lis[i].classname=Classes[i]; }                }                            }            //set a timer to automatically delete and subtract an array            varTime=NULL; //gets the largest div as the event source            varBig=document.getelementbyid ("Big")            functionstart () { time=setinterval (function() {Classes.unshift (Classes.pop ()); //get all the class names                     for(vari=0;i<classes.length;i++) {Lis[i].classname=Classes[i]; }                },2000); } start () Big.onmouseover=function() {clearinterval (time); } big.onmouseout=function(){                        //when the mouse is removed before starting the timerstart ()}} </script>

<DivID= "Big">        <Divclass= "Carousel-wrapper">            <ulID= "Carousel">                <Liclass= "left2"><imgsrc= "Images/50/1.jpg"alt=""></Li>                <binclass= "Left1"><imgsrc= "Images/50/2.jpg"alt=""></Li>                <Liclass= "King"><imgsrc= "Images/50/3.jpg"alt=""></Li>                <Liclass= "Right1"><imgsrc= "Images/50/4.jpg"alt=""></Li>                <Liclass= "Right2"><imgsrc= "Images/50/5.jpg"alt=""></Li>                <binclass= "Bench-warmer"><imgsrc= "Images/50/6.jpg"alt=""></Li>                <Liclass= "Bench-warmer"><imgsrc= "Images/50/7.jpg"alt=""></Li>                <Liclass= "Bench-warmer"><imgsrc= "Images/50/8.jpg"alt=""></Li>                <Liclass= "Bench-warmer"><imgsrc= "Images/50/9.jpg"alt=""></Li>            </ul>            <spanID= "Left-btn">&lt;</span>            <spanID= "Right-btn">&gt;</span>        </Div>    </Div>

CSS3 animation effects combined with JS's carousel