原生js动画函数封装,并用其写轮播图

用原生js写轮播图是为了方便封装一个简单动画函数

window.addEventListener('load',function(){
    // animate(调用对象,目标位置,可选回调函数)
    function animate(obj,target,callback){
        clearInterval(obj.time);
        obj.time = setInterval(function(){
            if(obj.offsetLeft==target){
            clearInterval( obj.time);
            callback&&callback();
        }
        var speed = target-obj.offsetLeft>0?obj.offsetLeft+ Math.ceil(((target-obj.offsetLeft)/10)):obj.offsetLeft+ Math.floor(((target-obj.offsetLeft)/10));
        obj.style.left =speed+'px';
        },30 )

    }
})
// 动画函数

轮播图写法也比较简陋,实例轮播图

添加新评论

  Timeline

我们来自五湖四海,转眼就要各奔东西。
--- updated on 2020年12月1日

  关于博主

计科学生一枚,现在变社畜了,依旧热爱分享,有趣想法也会尝试用代码实现;
建这个博客初衷在于记一些自己笔记和想法,方便自己查阅;
本博客内核采用 Typecho开源代码,平时也可能分享一些开源资源,若侵犯您版权,请联系我删除。

  近期评论

  • 暂无评论

只有脚踏实地的人,才能够说:路,就在我的脚下。

无论你选择做什么,追求完美的程度决定你成就的高度。

这个世界最脆弱的是生命,身体健康,很重要。

上帝说:你要什么便取什么,但是要付出相当的代价。

现在站在什么地方不重要,重要的是你往什么方向移动。