CSS3动画效果结合JS的轮播

Posted 2020-08-14

<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>