美文网首页
原生JS实现轮播图效果

原生JS实现轮播图效果

作者: 千锋小书童 | 来源:发表于2020-03-17 23:00 被阅读0次

    CSS部分代码:

    <style>
            *{padding: 0; margin: 0;}
            .container{
                width: 1130px;
                height: 286px;
                position: relative;
                margin: 0 auto;
                overflow: hidden;
            }
            .wrapper{
                position: absolute;
            }
            .slide{
                width: 1130px;
                height: 286px;
                float: left;
            }
            .slide img{
                width: 1130px;
                height: 286px;
            }
            .btn-left,.btn-right{
                background-image: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/left_arrow.svg?v=2);
                background-position:center;
                width: 52px;
                height: 52px;
                position: absolute;
                z-index: 999;
                left: 0;
                top: 117px;
            }
            .btn-right{
                left: 100%;
                margin-left: -52px;
                background-image: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/right_arrow.svg?v=2);
            }
        </style>
    

    HTML部分:

    <div class="container">
            <div class="wrapper">
                <div class="slide"><img src="https://img.zcool.cn/community/01411e5e6edf67a801216518fc43b6.jpg@1380w" alt=""></div>
                <div class="slide"><img src="https://img.zcool.cn/community/01e5bf5e6edfbfa801216518de51c1.jpg@1380w" alt=""></div>
                <div class="slide"><img src="https://img.zcool.cn/community/01a0495e672ba6a801216518617f4d.png@1380w" alt=""></div>
            </div>
            <div class="btn-left"></div>
            <div class="btn-right"></div>
        </div>
    

    JavaScript部分

    <script>
            //父容器,用来适配轮播图的宽
            var wrapper = document.querySelector(".wrapper");
            //图片
            var sliders = wrapper.children;
            //左边按钮
            var btn_left_ele = document.querySelector(".btn-left");
            //右边按钮
            var btn_right_ele = document.querySelector(".btn-right");
            // 下标
            var index = 0;
            function init(){
                //复制第一张图层到最后,用来达到最后一张不会出现空白的效果
                wrapper.appendChild(sliders[0].cloneNode(true));
                //获取轮播图的宽,并设置容器的宽为轮播图的宽
                wrapper.style.width = sliders.length * sliders[0].offsetWidth + "px";
            }
            function bindEvent(){
                btn_left_ele.addEventListener("click" , function(){
                    if(index === 0){
                        //直接替换不需要动画;
                        // 切换到最后一张,这个切换是没有动画的
                        index = sliders.length - 1;
                        //定位每一张轮播图的位置
                        wrapper.style.left = -index *1130 + "px";
                        // 因为要显示的是倒数第二张,所以index--
                        index --;
                    }else{
                        index --;
                    }
                    //运行封装好的动画函数
                    animate( wrapper , -index * 1130 , "left" );
                })
    
                btn_right_ele.addEventListener("click" , function(){
                    if(index === sliders.length - 1){
                        //直接替换不需要动画;
                        // 切换到最后一张,这个切换是没有动画的
                        index = 0;
                        wrapper.style.left = 0 + "px";
                        // 因为要显示的是第二张,所以index++
                        index ++;
                    }else{
                        index ++;
                    }
                    //运行封装好的动画函数
                    animate( wrapper , -index * 1130 , "left" ,"swing");
                })
            }
            init();
            bindEvent();
    
    
            //动画函数
            function animate ( ele , target , attr , timerfunction = "swing" , speed ){
                //判断数据获取一次元素当前的值
                if( attr === "opacity" ){
                    var iNow = parseInt( getComputedStyle( ele )[ attr ] * 100 );
                    target = target * 100 ;
                }else{
                    var iNow = parseInt( getComputedStyle( ele )[attr] );
                }
                if( timerfunction === "liner"){
                    //判断speed是否存在
                    speed = speed === undefined ? 5 : speed;
                    // 判定speed的正负;
                    speed = iNow < target ? Math.abs(speed) : -Math.abs(speed);
                }
                // 开启关闭定时器
                clearInterval( ele.timer );
                ele.timer = setInterval( function(){
                    if(timerfunction === "swing" ){
                    // 根据目标端求得运动的速度
                    speed = ( target -iNow ) / 10;
                    //速度取整,要查看速度是正数还是负数
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    }
                    // 判定终止条件
                    if( Math.abs(target - iNow) <= Math.abs(speed) ){
                        clearInterval(ele.timer);
                        if( attr === "opacity" ){
                                ele.style[attr] = target / 100;
                            }else{
                                ele.style[attr] = target + "px";
                        }
                    }else{
                        //元素运动
                        iNow += speed;
                        if( attr === "opacity" ){
                            ele.style[attr] = iNow /100 ; 
                        }else{
                            ele.style[attr] = iNow + "px";
                        }
                    }
                } , 30)
            }
        </script>
    

    相关文章

      网友评论

          本文标题:原生JS实现轮播图效果

          本文链接:https://www.haomeiwen.com/subject/ukcfyhtx.html