DOM高级 封装简单动画

一丶封装动画

 封装好的简答动画

/**

 * 动画函数

 * @param {node} ele 要设置动画的标签

 * @param {number} obj 要动画的属性和目标值组成的键值对

 * @param {number} fn 动画结束后要执行的函数

 */

function animate(ele,obj, fn = () => {}){

    let  num = 0

    for(let key in obj){

        num++

        let target = obj[key]

        let l = getComputedStyle(ele)[key]

        if(key === 'opacity'){

            l*=100

            target*=100

        }

        l= parseInt(l)

        let timer=setInterval(() => {

             let speed = (target - l)/20

             l += speed > 0 ? Math.ceil(speed) : Math.floor(speed)

             ele.style[key] = key === 'opacity' ? l / 100 : l + 'px'

                if(l === target){

                    clearInterval(timer)

                    --num === 0 ? fn() : ''

                }

        },17)

    }  

}

二丶swiper的使用

官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

1. 下载:下载Swiper - Swiper中文网

2. 看文档，复制代码

3. 配置选项

   • 自动轮播

     autoplay: {
         delay: 1000,//1秒切换一次
     },

   • 轮播方向

     direction: 'horizontal',

   • 是否循环

     loop: true,

   • 移入停止移出继续

     var container = document.querySelector('.swiper-container')
     container.onmouseenter = function(){
         mySwiper.autoplay.stop();
     }
     container.onmouseleave = function(){
         mySwiper.autoplay.start();
     }

4. 查看API文档：中文api - Swiper中文网