<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:10;        }        .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:11;            cursor:pointer;        }        .carousel-wrapper #right-btn{            right:-320px;            left:auto;        }    </style>

<script>        window.onload=function(){            var left_btn =document.getElementById("left-btn");            var right_btn=document.getElementById("right-btn");            var carousel =document.getElementById("carousel");            var lis      =carousel.getElementsByTagName("li");            var lock     =false;            //将类名保存在数组内            var classes=["left2","left1","king","right1","right2","bench-warmer","bench-warmer","bench-warmer","bench-warmer"];                        right_btn.onclick=function(){                if(lock==false){                    //设置定时器                    lock=true;                    setTimeout(function(){                        lock=false;                    },1000 )                    classes.unshift(classes.pop());                //得到所有的类名                    for(var i=0;i<classes.length;i++){                    lis[i].className=classes[i];                     }                }                            }            left_btn.onclick=function(){                if(lock==false){                    lock=true;                    setTimeout(function(){                        lock=false;                    },1000)                    //增删数组                    classes.push(classes.shift());                    // 遍历修改完的数组                    for(var i=0;i<classes.length;i++){                    lis[i].className=classes[i];                }                }                            }            //设置一个定时器自动增删数组            var time=null;            //获取到最大的Div作为事件源            var big=document.getElementById("big")            function start(){                time=setInterval(function(){                    classes.unshift(classes.pop());                //得到所有的类名                    for(var i=0;i<classes.length;i++){                    lis[i].className=classes[i];                     }                },2000);            }            start()                    big.onmouseover=function(){                        clearInterval(time);                }                    big.onmouseout=function(){                        //当鼠标移除后再启动定时器                        start()                    }                                        }    </script>

<div id="big">        <div class="carousel-wrapper">            <ul id="carousel">                <li class="left2"><img src="images/50/1.jpg" alt=""></li>                <li class="left1"><img src="images/50/2.jpg" alt=""></li>                <li class="king"><img src="images/50/3.jpg" alt=""></li>                <li class="right1"><img src="images/50/4.jpg" alt=""></li>                <li class="right2"><img src="images/50/5.jpg" alt=""></li>                <li class="bench-warmer"><img src="images/50/6.jpg" alt=""></li>                <li class="bench-warmer"><img src="images/50/7.jpg" alt=""></li>                <li class="bench-warmer"><img src="images/50/8.jpg" alt=""></li>                <li class="bench-warmer"><img src="images/50/9.jpg" alt=""></li>            </ul>            <span id="left-btn">&lt;</span>            <span id="right-btn">&gt;</span>        </div>    </div>