动画原理和轮播简单原理



动画简单原理
            在电脑屏幕上，应该每隔多少秒改变一次
            一般屏幕刷新率  60hz
            1000 / 60

            每隔多少毫秒执行一次

            setInterval(function(){
                var left = parseInt(getStyle(ele).left);
                var step = (target - left) / 10   // 如果想要快点完成，那么10 要变小

            })

            动画函数最初都要把计时器清除
            例：
                var box = document.getElementById('box');
                var t = setInterval(function(){
                var left = box.offsetLeft;
                var step = ( 0 - left ) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                console.log(step)
                box.style.left = left + step + "px";
                if(Math.abs(0-left)<1){
                    clearInterval(t);
                }
            }, 1000 / 60)
        轮播的简单原理
            index  就是显示的那一页下标
            点击上一页
                index--
                根据index设置left的值
                // -index * LI_WIDTH + "px"
                move(元素, -index * LI_WIDTH)
            点击下一页
                index++
                根据index设置left的值
                // -index * LI_WIDTH + "px"
                move(元素, -index * LI_WIDTH)
               
            循环播放的原理
                把第一张克隆到最后一张
                1 2 3 4 1

                当在第一页点击上一页按钮时
                    if(index === 0){
                        index = 4
                        // 直接设置css跳转到4的位置
                        ul.style.left = -index * LI_WIDTH + "px";
                    }
                    index--
                    move()

                当在最后一页点击下一页按钮时
                    if(index === 4){
                        index = 0
                        ul.style.left = 0;
                    }
                    index++
                    move()